Site Map Component

<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>