Dropdown-Menü-Komponente

<div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="transition-all duration-300 ease-in-out inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 dark:focus:ring-purple-600 active:scale-98" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Account Actions
      <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>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. Using inline style here to simulate dynamic show/hide. In a real app, this would be toggled with JS. -->
  <div class="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 focus:outline-none origin-top-right transition-all duration-300 ease-out transform scale-95 opacity-0 invisible sm:scale-100 sm:opacity-100 sm:visible" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.794 3.391A60.07 60.07 0 0022.5 12c0-8.284-6.716-15-15-15S0 3.716 0 12c0 3.037.915 5.86 2.593 8.163" />
        </svg>
        View Balance
      </a>
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Transaction History
      </a>
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Transfer Funds
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="transition-colors duration-200 block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
          <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3-9l-3 3m0 0l3 3m-3-3H21" />
          </svg>
          Log Out Account
        </button>
      </form>
    </div>
  </div>
</div>