HTML 代码
<div class="bg-gray-100 dark:bg-gray-800 h-screen w-64 shadow-lg p-5">
<div class="flex items-center mb-6">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-3">Hello, User!</h1>
</div>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=1" alt="Icon">
<span class="text-gray-800 dark:text-white">Dashboard</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=2" alt="Icon">
<span class="text-gray-800 dark:text-white">Profile</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=3" alt="Icon">
<span class="text-gray-800 dark:text-white">Settings</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=4" alt="Icon">
<span class="text-gray-800 dark:text-white">Messages</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
<img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=5" alt="Icon">
<span class="text-gray-800 dark:text-white">Logout</span>
</a>
</li>
</ul>
</div>相关组件
简单生动的博客侧边栏
一个用于博客内容的简单响应式侧边栏组件，使用 Tailwind CSS 设计有鲜艳的色彩和类似 Material 的感觉。包括导航链接和用户配置文件部分。支持使用 Tailwind 的 dark： 前缀的深色模式。固定在较大的屏幕上，隐藏在较小的屏幕上。