Componente de menú desplegable

<div class="relative w-64">
    <!-- Dropdown Button -->
    <button class="bg-gray-800 text-white font-semibold py-2 px-4 rounded inline-flex items-center focus:outline-none focus:ring-2 focus:ring-white">
        <span>Dropdown</span>
        <svg class="ml-2 w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 10l5 5 5-5" />
        </svg>
    </button>

    <!-- Dropdown Menu -->
    <div class="absolute w-full bg-gray-700 rounded-md mt-1 shadow-lg z-10 hidden group-hover:block transition-all ease-in-out duration-200 transform origin-top scale-y-0 group-hover:scale-y-100">
        <div class="py-1">
            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors duration-150">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
                Profile
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors duration-150">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" />
                Settings
            </a>
            <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors duration-150">
                <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" />
                Logout
            </a>
        </div>
    </div>
</div>

<style>
    /* Dark Mode Support */
    @media (prefers-color-scheme: dark) {
        .bg-gray-700 { background-color: #374151; }
        .text-gray-300 { color: #D1D5DB; }
        .hover\:bg-gray-600:hover { background-color: #4B5563; }
    }
</style>