HTML 代码
<div class="bg-gray-800 text-white h-screen flex flex-col">
<div class="flex justify-between items-center p-5">
<div class="text-2xl font-bold">Dashboard</div>
<button id="menu-toggle" class="focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div id="menu" class="hidden bg-gray-700 p-4 rounded-lg shadow-lg">
<ul class="space-y-2">
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Home</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Profile</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Settings</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Logout</a></li>
</ul>
</div>
<div class="flex-1 p-5">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
<div class="text-xl font-semibold">Card Title 1</div>
<p class="text-gray-400">Some descriptive text for this card.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
<div class="text-xl font-semibold">Card Title 2</div>
<p class="text-gray-400">Some descriptive text for this card.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=3" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
<div class="text-xl font-semibold">Card Title 3</div>
<p class="text-gray-400">Some descriptive text for this card.</p>
</div>
</div>
</div>
</div>