Componente Mega Menú

<div class="relative bg-white dark:bg-gray-800">
    <nav class="flex items-center justify-between p-4 shadow-lg">
        <div class="text-2xl font-bold text-gray-800 dark:text-white">My Website</div>
        <ul class="flex space-x-6">
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Home</a></li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">About</a></li>
            <li class="relative">
                <a href="#" class="text-gray-800 dark:text-white hover:underline">Services</a>
                <div class="absolute left-0 hidden mt-2 w-48 bg-white dark:bg-gray-700 shadow-lg rounded-lg transition duration-300 transform scale-95 hover:scale-100" id="menu">
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Web Design</h3>
                        <img src="https://picsum.photos/200/100?random=1" alt="Web Design" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Creating visually appealing websites.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">SEO Services</h3>
                        <img src="https://picsum.photos/200/100?random=2" alt="SEO Services" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Optimizing search engine results.</p>
                    </div>
                    <div class="border-t border-gray-200 dark:border-gray-600"></div>
                    <div class="p-4">
                        <h3 class="text-gray-800 dark:text-white font-semibold">Marketing</h3>
                        <img src="https://picsum.photos/200/100?random=3" alt="Marketing" class="my-2 rounded-lg shadow-lg">
                        <p class="text-gray-600 dark:text-gray-300">Promoting your business effectively.</p>
                    </div>
                </div>
            </li>
            <li><a href="#" class="text-gray-800 dark:text-white hover:underline">Contact</a></li>
        </ul>
    </nav>
    <div class="hidden md:block mt-4 p-4 bg-gray-100 dark:bg-gray-600 rounded-lg">
        <h2 class="text-lg font-bold text-gray-800 dark:text-white">Team Members</h2>
        <div class="flex space-x-4 mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" class="w-12 h-12 rounded-full" alt="Avatar">
        </div>
    </div>
</div>
<style>
    /* Dark mode styles */
    .dark .bg-gray-800 {
        background-color: #333;
    }
    .dark .text-gray-800 {
        color: #f7fafc;
    }
</style>