DropDown

<div class="bg-gray-100 min-h-screen flex items-center justify-center">
<div class="relative inline-block text-left">
    <button id="dropdown-button" class="inline-flex justify-center
    w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white
    border border-gray-300 rounded-md shadow-sm focus:outline-none
    focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100
    focus:ring-blue-500">
        Theme
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2 -mr-1" 
        viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M6.293 9.293a1 1 0
             011.414 0L10 11.586l2.293-2.293a1 1 0 111.414
              1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" 
              clip-rule="evenodd" />
        </svg>
    </button>
    <div id="dropdown-menu" class="origin-top-right absolute
    right-0 mt-2 w-48 rounded-md shadow-lg 
    bg-white ring-1 ring-black ring-opacity-5">
        <div class="py-2 p-2" role="menu" 
        aria-orientation="vertical" aria-labelledby="dropdown-button">
            <a class="block rounded-md px-4 py-2
            text-sm text-gray-700 hover:bg-gray-100
            active:bg-blue-100 cursor-pointer" role="menuitem">
              <svg></svg> Light
              </a>
            <a class="block rounded-md px-4 py-2
            text-sm text-gray-700 hover:bg-gray-100
            active:bg-blue-100 cursor-pointer" role="menuitem">
              <svg></svg> Dark
              </a>
            <a class="block rounded-md px-4 py-2
            text-sm text-gray-700 hover:bg-gray-100
            active:bg-blue-100 cursor-pointer" role="menuitem">
              <svg></svg> System
              </a>
        </div>
    </div>
</div>
</div>
<script>
const dropdownButton = document.getElementById('dropdown-button');
const dropdownMenu = document.getElementById('dropdown-menu');
let isDropdownOpen = false;

function toggleDropdown() {
isDropdownOpen = !isDropdownOpen;
if (isDropdownOpen) {
dropdownMenu!.classList.remove('hidden');
} else {
dropdownMenu!.classList.add('hidden');
}
}

// Asegurarse de que los elementos no sean null antes de agregar los eventos
if (dropdownButton && dropdownMenu) {
toggleDropdown();

dropdownButton.addEventListener('click', toggleDropdown);

window.addEventListener('click', (event) => {
if (!dropdownButton.contains(event.target as Node) && !dropdownMenu.contains(event.target as Node)) {
    dropdownMenu.classList.add('hidden');
    isDropdownOpen = false;
}
});
}
</script>