HTML 代码
<div class="bg-white dark:bg-gray-800 p-6 rounded-md shadow-md">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-100">Site Map</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="p-4 bg-blue-100 dark:bg-blue-900 rounded shadow">
<h3 class="font-semibold text-lg text-blue-800 dark:text-blue-200">Products</h3>
<ul class="mt-2">
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">New Arrivals</a></li>
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Featured</a></li>
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Best Sellers</a></li>
<li><a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sales</a></li>
</ul>
</div>
<div class="p-4 bg-green-100 dark:bg-green-900 rounded shadow">
<h3 class="font-semibold text-lg text-green-800 dark:text-green-200">Categories</h3>
<ul class="mt-2">
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Men</a></li>
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Women</a></li>
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Kids</a></li>
<li><a href="#" class="text-green-600 dark:text-green-400 hover:underline">Accessories</a></li>
</ul>
</div>
<div class="p-4 bg-pink-100 dark:bg-pink-900 rounded shadow">
<h3 class="font-semibold text-lg text-pink-800 dark:text-pink-200">Support</h3>
<ul class="mt-2">
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Customer Service</a></li>
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Returns</a></li>
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">FAQs</a></li>
<li><a href="#" class="text-pink-600 dark:text-pink-400 hover:underline">Contact Us</a></li>
</ul>
</div>
</div>
<div class="mt-8">
<h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">User Profile</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</p>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="font-semibold text-lg text-gray-800 dark:text-gray-100">Featured Image</h3>
<img src="https://picsum.photos/300/200" alt="Featured" class="mt-2 rounded-md shadow">
</div>
</div>