Dropdown Menu Component

<div class="relative inline-block text-left font-sans">
  <button id="dropdownButton" class="inline-flex justify-center w-full rounded-md px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 transform transition-all duration-300 ease-in-out
    bg-emerald-700 text-amber-50 shadow-lg
    dark:bg-stone-800 dark:text-stone-100
    hover:scale-105 hover:shadow-xl
    focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-emerald-100
    dark:focus:ring-stone-600 dark:focus:ring-offset-stone-900
    active:scale-95 active:shadow-md
    border-b-4 border-r-4 border-emerald-900 dark:border-stone-900
    hover:border-b-emerald-800 hover:border-r-emerald-800
    dark:hover:border-b-stone-700 dark:hover:border-r-stone-700
    ">
    Options
    <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
    </svg>
  </button>

  <!-- Dropdown panel, show/hide based on button click. -->
  <div id="dropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none transform scale-y-0 opacity-0 transition-all duration-300 ease-in-out
    bg-amber-100
    dark:bg-stone-700
    border-b-4 border-r-4 border-amber-300 dark:border-stone-800
    " role="menu" aria-orientation="vertical" aria-labelledby="dropdownButton" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
      <a href="#" class="block px-4 py-2 text-sm
        text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
        dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
        border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
        transition-all duration-200 ease-in-out
        " role="menuitem" tabindex="-1" id="menu-item-2">License</a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm
          text-emerald-800 hover:bg-emerald-100 hover:text-emerald-900
          dark:text-stone-100 dark:hover:bg-stone-600 dark:hover:text-stone-50
          border-l-4 border-transparent hover:border-emerald-600 dark:hover:border-stone-500
          transition-all duration-200 ease-in-out
          " role="menuitem" tabindex="-1" id="menu-item-3">Sign out</button>
      </form>
    </div>
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const dropdownButton = document.getElementById('dropdownButton');
    const dropdownMenu = document.getElementById('dropdownMenu');

    function toggleDropdown() {
      if (dropdownMenu.classList.contains('scale-y-0')) {
        dropdownMenu.classList.remove('scale-y-0', 'opacity-0');
        dropdownMenu.classList.add('scale-y-100', 'opacity-100');
      } else {
        dropdownMenu.classList.remove('scale-y-100', 'opacity-100');
        dropdownMenu.classList.add('scale-y-0', 'opacity-0');
      }
    }

    dropdownButton.addEventListener('click', toggleDropdown);

    // Close the dropdown if the user clicks outside of it
    document.addEventListener('click', (event) => {
      if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
        if (dropdownMenu.classList.contains('scale-y-100')) {
          toggleDropdown();
        }
      }
    });

    // Optional: Close on Escape key
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && dropdownMenu.classList.contains('scale-y-100')) {
        toggleDropdown();
      }
    });
  });
</script>