HTML 代码
<div class="bg-gray-900 text-white p-5">
<div class="container mx-auto">
<div class="flex justify-between items-center">
<h1 class="text-xl font-bold">Social Media</h1>
<nav class="hidden md:flex space-x-4">
<a href="#" class="hover:underline">Home</a>
<a href="#" class="hover:underline">Profile</a>
<a href="#" class="hover:underline">Messages</a>
<a href="#" class="hover:underline">Settings</a>
</nav>
<div class="md:hidden cursor-pointer">
<span class="block w-6 h-1 bg-white mb-1"></span>
<span class="block w-6 h-1 bg-white mb-1"></span>
<span class="block w-6 h-1 bg-white"></span>
</div>
</div>
<div class="mt-5 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
<img src="https://picsum.photos/200/150" alt="Image 1" class="rounded-lg mb-3">
<p class="text-center">Title 1</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
<img src="https://picsum.photos/200/150" alt="Image 2" class="rounded-lg mb-3">
<p class="text-center">Title 2</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg flex flex-col items-center">
<img src="https://picsum.photos/200/150" alt="Image 3" class="rounded-lg mb-3">
<p class="text-center">Title 3</p>
</div>
</div>
</div>
</div>
<div class="bg-gray-800 text-gray-300 p-5">
<div class="container mx-auto">
<h2 class="text-lg font-semibold">User Profiles</h2>
<div class="mt-4 grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="rounded-full w-16 h-16 mb-3">
<p class="text-center">User 1</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 2" class="rounded-full w-16 h-16 mb-3">
<p class="text-center">User 2</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User 3" class="rounded-full w-16 h-16 mb-3">
<p class="text-center">User 3</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User 4" class="rounded-full w-16 h-16 mb-3">
<p class="text-center">User 4</p>
</div>
</div>
</div>
</div>相关组件
Mega Menu 组件
使用 Tailwind CSS 的具有深色模式 UI、类似配色方案和复杂复杂性的 Mega Menu Component，用于仪表板目的。它应该是响应式的，并使用 Tailwind dark： 前缀支持深色主题。无需 JavaScript 代码，只需使用 Tailwind 类的 HTML。图片来自 picsum.photos，头像来自 randomuser.me。