HTML 代码
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
</a>
</li>
</ul>
</div>相关组件
玻璃态边栏导航
用于投资组合的 Glassmorphism 风格的响应式侧边栏导航组件，具有深色模式支持和类似的配色方案。具有磨砂玻璃效果和仅使用 HTML 和 Tailwind CSS 的多个交互式元素。
Gaming_Sidebar_Navigation_Component
适用于游戏网站的响应式侧边栏导航组件，采用等宽层/开发人员风格的设计，具有高对比度、深色模式支持和交互式元素。非常适合游戏界面和社区门户。