HTML 代码
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-3">
<h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Website</h1>
</div>
<button class="text-gray-800 dark:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
</svg>
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 1</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 2</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Category 3</h2>
<ul class="mt-2">
<li class="mt-1 hover:text-blue-500"><a href="#">Link 1</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 2</a></li>
<li class="mt-1 hover:text-blue-500"><a href="#">Link 3</a></li>
</ul>
</div>
</div>
<div class="mt-6">
<h2 class="font-semibold text-lg text-gray-800 dark:text-gray-200">Featured Users</h2>
<div class="flex space-x-4 mt-2">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 1</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 2</span>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/50/50" alt="User 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600">
<span class="text-gray-800 dark:text-gray-200">User 3</span>
</div>
</div>
</div>
</div>相关组件
Mega Menu 组件
具有极简/扁平化设计、充满活力的配色方案、复杂复杂性级别的大型菜单组件，用于仪表板用途，使用 Tailwind CSS。支持深色主题的响应式设计。没有 JavaScript 代码，只有带有 Tailwind 类的 HTML。深色模式使用 Tailwind 的 dark： 前缀进行样式设置。图像使用 picsum.photos 和 randomuser.me 作为头像。