Search Components

Dropdown Menu

Sub-menus that appear when clicked or hovered

Glassmorphism Dropdown Menu

A simple, responsive dropdown menu with a glassmorphism design, using purple/violet tones, suitable for technology/SaaS applications. Supports dark mode.

Open Preview

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-600 text-sm font-medium text-white hover:from-purple-600 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gradient-to-r dark:from-purple-700 dark:to-indigo-800 dark:hover:from-purple-800 dark:hover:to-indigo-900 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600" id="menu-button" aria-expanded="true" aria-haspopup="true">
      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>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. -->
  <div 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 transition ease-out duration-200 scale-100 opacity-100" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1 rounded-md bg-white/30 backdrop-blur-lg border border-white/40 dark:bg-gray-800/30 dark:border-gray-700/40" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-0">
        Account settings
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-1">
        Support
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-white/50 hover:text-gray-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-gray-700/50 dark:hover:text-white" 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-gray-700 hover:bg-red-100 hover:text-red-900 rounded-lg mx-1 my-1 dark:text-gray-200 dark:hover:bg-red-900 dark:hover:text-white" role="menuitem" tabindex="-1" id="menu-item-3">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

Dropdown Menu Component

A clean, minimalist dropdown menu for event and conference websites, featuring a forest green color palette and responsive design with dark mode support, inspired by Swiss/International Typography.

Open Preview

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-current 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-green-500 dark:focus:ring-offset-gray-900 dark:focus:ring-green-400" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Event Sessions
      <!-- Heroicon name: solid/chevron-down -->
      <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 panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Keynote Speakers</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Panel Discussions</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Workshops</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">Networking Events</a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-green-50 dark:hover:bg-green-800 hover:text-green-800 dark:hover:text-green-200" role="menuitem">View Full Schedule</a>
    </div>
  </div>
</div>

Luxury Dropdown Menu for Finance

An elegant, responsive dropdown menu component designed for financial and banking interfaces, featuring a black and white color scheme with a subtle accent, dark mode support, and sophisticated typography. Compatible with desktop, tablet, and mobile views.

Open Preview

                <div class="relative inline-block text-left font-serif">
  <div>
    <button type="button" class="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-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 transition duration-150 ease-in-out" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Accounts & Services
      <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 panel, show/hide based on dropdown state.

    Entering: "transition ease-out duration-100"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-75"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-gray-700 focus:outline-none z-10 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-credit-card mr-2 text-gray-500 dark:text-gray-400"></i> Checking Accounts
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-piggy-bank mr-2 text-gray-500 dark:text-gray-400"></i> Savings Accounts
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-hand-holding-usd mr-2 text-gray-500 dark:text-gray-400"></i> Loans & Credit
      </a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-chart-line mr-2 text-gray-500 dark:text-gray-400"></i> Investments
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-wallet mr-2 text-gray-500 dark:text-gray-400"></i> Online Banking
      </a>
    </div>
    <div class="py-1">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-indigo-600 dark:hover:text-indigo-500 transition duration-150 ease-in-out" role="menuitem">
        <i class="fas fa-headset mr-2 text-gray-500 dark:text-gray-400"></i> Customer Support
      </a>
    </div>
  </div>
</div>

<!-- To make the dropdown interactive, you would typically use a small amount of JavaScript.
     For example, a simple toggle on button click to add/remove 'hidden' class from the dropdown panel.
     Since the prompt strictly forbids JavaScript, this example shows the structure 
     and styling for both states (button and dropdown content) as per Tailwind CSS usage. -->

<!-- To simulate interactivity for demonstration, you can manually remove 'hidden' class from the dropdown panel div.
     Example: <div class="origin-top-right absolute right-0 [...] z-10" role="menu" ...> -->

Dropdown Menu Component

A simple, industrial-style dropdown menu component for news/journalism websites, featuring a forest/green color palette and dark mode support. Designed to be responsive across all devices.

Open Preview

                <div class="relative flex justify-center items-center font-sans dark:bg-gray-900 bg-gray-100 p-4">
  <div class="group relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center items-center w-full rounded-md border border-gray-400 dark:border-gray-600 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-emerald-500 dark:focus:ring-offset-gray-900 dark:focus:ring-emerald-600 transition-all duration-300" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Sections
        <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.

      Entering: "transition ease-out duration-100"
        From: "transform opacity-0 scale-95"
        To: "transform opacity-100 scale-100"
      Leaving: "transition ease-in duration-75"
        From: "transform opacity-100 scale-100"
        To: "transform opacity-0 scale-95"
    -->
    <div class="opacity-0 scale-95 group-hover:opacity-100 group-hover:scale-100 duration-200 ease-out origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none transition-all" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">Latest News</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">Politics</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">Business</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">Technology</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">Opinion</a>
        <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-emerald-500 dark:hover:bg-emerald-600 hover:text-white dark:hover:text-white transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">Sports</a>
      </div>
    </div>
  </div>
</div>

3D_Marketplace_Dropdown_Menu

A complex, 3D-inspired dropdown menu component designed for marketplace platforms, featuring warm neutral colors, multi-level navigation, and full responsiveness with dark mode support. It incorporates depth and engagement through subtle shadows and transitions.

Open Preview

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-850 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-900 focus:ring-amber-500 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:shadow-lg active:scale-95" id="menu-button" aria-expanded="true" aria-haspopup="true">
      Categories
      <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.

    Entering: "transition ease-out duration-200"
      From: "transform opacity-0 scale-95"
      To: "transform opacity-100 scale-100"
    Leaving: "transition ease-in duration-150"
      From: "transform opacity-100 scale-100"
      To: "transform opacity-0 scale-95"
  -->
  <div class="absolute right-0 mt-2 w-72 md:w-96 origin-top-right bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-800 rounded-md shadow-xl ring-1 ring-black ring-opacity-5 focus:outline-none transform scale-100 opacity-100 transition-all duration-300 ease-in-out z-50" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">
        <img src="https://picsum.photos/30/30?random=1" alt="Electronics icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Electronics
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">
        <img src="https://picsum.photos/30/30?random=2" alt="Fashion icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Fashion & Apparel
        <svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">
        <img src="https://picsum.photos/30/30?random=3" alt="Home & Garden icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Home & Garden
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">
        <img src="https://picsum.photos/30/30?random=4" alt="Books icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Books & Media
      </a>
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-4">
        <img src="https://picsum.photos/30/30?random=5" alt="Sports icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Sports & Outdoors
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-5">
        <img src="https://picsum.photos/30/30?random=6" alt="Vehicles icon" class="w-5 h-5 mr-3 rounded-full shadow-md">
        Vehicles
        <svg class="ml-auto h-4 w-4 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
        </svg>
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-6">All Categories</a>
      <a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-7">Sell on Marketplace</a>
    </div>
  </div>
</div>

RetroGamingDropdownMenu

A responsive, retro/vintage-themed dropdown menu component with a muted color scheme, suitable for gaming websites, featuring dark mode support.

Open Preview

                <div class="relative inline-block text-left font-mono">
  <button id="retroDropdownButton" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-400 bg-gray-200 px-4 py-2 text-sm font-bold text-gray-800 shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-purple-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:focus:ring-offset-gray-800 dark:focus:ring-purple-400 transform transition-all duration-150 ease-in-out active:translate-y-1" aria-expanded="false" aria-haspopup="true">
    Game 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 id="retroDropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-gray-200 ring-1 ring-black ring-opacity-5 focus:outline-none border-t-2 border-l-2 border-r-4 border-b-4 border-gray-500 dark:bg-gray-800 dark:border-gray-600 hidden opacity-0 scale-95 transition-all duration-200 ease-out transform" role="menu" aria-orientation="vertical" aria-labelledby="retroDropdownButton" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0">
        <span class="pr-2 text-yellow-600 dark:text-yellow-400">▶</span> New Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-1">
        <span class="pr-2 text-red-600 dark:text-red-400">■</span> Load Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 border-b border-dashed border-gray-400 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 dark:border-gray-600 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-2">
        <span class="pr-2 text-green-600 dark:text-green-400">●</span> Save Game
      </a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-300 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-gray-100 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-3">
        <span class="pr-2 text-blue-600 dark:text-blue-400">◆</span> Options
      </a>
    </div>
  </div>
</div>

<script>
  // Basic JavaScript for demonstration, not part of the HTML/Tailwind solution itself.
  // In a real application, you'd use a JS framework or a dedicated script.
  const dropdownButton = document.getElementById('retroDropdownButton');
  const dropdownMenu = document.getElementById('retroDropdownMenu');

  dropdownButton.addEventListener('click', () => {
    const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
    dropdownButton.setAttribute('aria-expanded', !isExpanded);
    if (!isExpanded) {
      dropdownMenu.classList.remove('hidden', 'opacity-0', 'scale-95');
      dropdownMenu.classList.add('block', 'opacity-100', 'scale-100');
      dropdownMenu.focus();
    } else {
      dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
      dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
    }
  });

  // Close the dropdown if clicking outside
  document.addEventListener('click', (event) => {
    if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
      if (!dropdownMenu.classList.contains('hidden')) {
        dropdownButton.setAttribute('aria-expanded', 'false');
        dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
        dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
      }
    }
  });

  // Close on Escape key
  dropdownMenu.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      dropdownButton.setAttribute('aria-expanded', 'false');
      dropdownMenu.classList.remove('block', 'opacity-100', 'scale-100');
      dropdownMenu.classList.add('hidden', 'opacity-0', 'scale-95');
      dropdownButton.focus();
    }
  });
</script>

Dropdown Menu Component

A simple, monochromatic dropdown menu component designed for finance/banking interfaces, featuring subtle microinteractions and full responsiveness with dark mode support.

Open Preview

                <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>

Dropdown Menu Component

A complex, responsive dropdown menu component designed for documentation or wiki sites, featuring a clean, minimalist Swiss/International Typography style with an Ocean/Blue color scheme. Includes dark mode support and multiple interactive elements.

Open Preview

                <div class="font-sans antialiased text-gray-800 bg-white dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 md:p-8">

  <!-- Dropdown Container -->
  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-blue-700 shadow-sm px-4 py-2 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700 dark:focus:ring-offset-gray-900" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Documentation Sections
        <!-- Heroicon name: solid/chevron-down -->
        <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. -->
    <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-blue-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
      <div class="py-1" role="none">
        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-0">Getting Started</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-1">Core Concepts</a>
      </div>
      <div class="py-1" role="none">
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-2">Advanced Guides</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-3">API Reference</a>
      </div>
      <div class="py-1" role="none">
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-4">Tutorials</a>
        <form method="POST" action="#" role="none">
          <button type="submit" class="text-gray-700 dark:text-gray-300 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1" id="menu-item-5">Support &amp; FAQ</button>
        </form>
      </div>
    </div>
  </div>

  <!-- Example of another dropdown or related element - for complexity -->
  <div class="relative inline-block text-left ml-4">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-blue-700 shadow-sm px-4 py-2 bg-blue-500 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-offset-gray-900" id="menu-button-2" aria-expanded="true" aria-haspopup="true">
        Version
        <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>

    <div class="origin-top-right absolute right-0 mt-2 w-44 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 dark:divide-blue-700 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button-2" tabindex="-1">
      <div class="py-1" role="none">
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v2.0 (Latest)</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v1.5</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-gray-100 dark:hover:bg-blue-900" role="menuitem" tabindex="-1">v1.0 (Archive)</a>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (example concept - would typically be part of a larger nav) -->
  <div class="sm:hidden mt-8">
    <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-blue-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
      <span class="sr-only">Open main menu</span>
      <!-- Icon when menu is closed. Heroicon name: outline/menu -->
      <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
      <!-- Icon when menu is open. Heroicon name: outline/x -->
      <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </button>

    <div class="space-y-1 px-2 pt-2 pb-3 hidden" id="mobile-menu">
      <a href="#" class="bg-blue-100 dark:bg-blue-800 text-blue-700 dark:text-white block px-3 py-2 rounded-md text-base font-medium" aria-current="page">Getting Started</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">Core Concepts</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">Advanced Guides</a>
      <a href="#" class="text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-blue-900 hover:text-gray-900 dark:hover:text-gray-100 block px-3 py-2 rounded-md text-base font-medium">API Reference</a>
    </div>
  </div>

</div>

Dropdown Menu Component

A responsive dropdown menu component for finance/banking interfaces, featuring microinteractions, jewel-tone colors, and dark mode support. Designed for user engagement and clarity.

Open Preview

                <div class="relative inline-block text-left font-sans">
  <button id="dropdown-button" type="button" class="inline-flex justify-center items-center gap-2 w-full rounded-md border border-emerald-600 bg-emerald-700 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-emerald-100 focus:ring-emerald-500 dark:border-emerald-500 dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:text-gray-100 dark:focus:ring-offset-emerald-900 transition-all duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105" aria-expanded="true" aria-haspopup="true">
    <svg class="-ml-1 mr-2 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
      <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.25 4.25a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
    </svg>
    <span>Account Options</span>
  </button>

  <div id="dropdown-menu" class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 transition-all duration-300 ease-out scale-95 opacity-0 invisible" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-button" tabindex="-1">
    <div class="py-1" role="none">
      <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-0">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5a.75.75 0 00.75.75h4.5a.75.75 0 000-1.5h-3.75V4.75z" />
            <path fill-rule="evenodd" d="M.93 2.822A.75.75 0 011.875 2.25h16.25a.75.75 0 01.945.572L19.45 4.75H.55L.93 2.822zM19.5 6.25l-.273 1.455A49.123 49.123 0 0110 16.75 49.123 49.123 0 01.773 7.705L.5 6.25h19z" clip-rule="evenodd" />
          </svg>
          <span>View Balance</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-1">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M.5 9.5a.75.75 0 01.75-.75h1.612l1.64-1.612a.75.75 0 011.14-.093l1.84 2.301 3.09-3.09a.75.75 0 011.06 0l2.031 2.032c.571-1.042.868-2.146.992-3.184A.75.75 0 0118.75 4l.25 10A.75.75 0 0118.28 15.118l-1.442-.361a49.117 49.117 0 01-14.774.225l-1.444.364A.75.75 0 01.5 14.5l.25-10a.75.75 0 01.272-.5zM16.48 9.07c-1.42.062-2.812.22-4.177.472-1.393.255-2.756.55-4.089.882l-2.032-2.032 2.502-3.128c.378-.472.935-.839 1.57-.935l1.896-.284c.8-.119 1.603-.178 2.408-.178.692 0 1.38-.027 2.063-.079l2.457-1.365a.75.75 0 01.407.697v1.895l.135 1.583z" clip-rule="evenodd" />
          </svg>
          <span>Transfer Funds</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-2">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M2 4.25A2.25 2.25 0 014.25 2h11.5A2.25 2.25 0 0118 4.25v2.5a.75.75 0 001.5 0v-2.5A3.75 3.75 0 0015.75 0H4.25A3.75 3.75 0 00.5 4.25v2.5a.75.75 0 001.5 0v-2.5z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M.5 10.75a.75.75 0 01.75-.75h17a.75.75 0 010 1.5h-17a.75.75 0 01-.75-.75zM1.25 13.5a.75.75 0 01.75-.75h16a.75.75 0 010 1.5H2a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M7.75 16.25a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75zM2.5 7.5a.75.75 0 000 1.5h15a.75.75 0 000-1.5H2.5z" clip-rule="evenodd" />
          </svg>
          <span>Transaction History</span>
        </div>
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-emerald-50 hover:text-emerald-800 dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-emerald-400 transition-colors duration-200" role="menuitem" tabindex="-1" id="menu-item-3">
        <div class="flex items-center gap-2">
          <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M10.5 5h-1a.75.75 0 000 1.5h1a.75.75 0 000-1.5zM10.5 8h-1a.75.75 0 000 1.5h1a.75.75 0 000-1.5zM3 12a2 2 0 104 0 2 2 0 00-4 0z" />
            <path fill-rule="evenodd" d="M2.25 5.5A2.75 2.75 0 015 2.75h10A2.75 2.75 0 0117.75 5.5v9.5a2.75 2.75 0 01-2.75 2.75H5A2.75 2.75 0 012.25 15V5.5zm3.5-.75a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-4z" clip-rule="evenodd" />
            <path d="M10.5 11h-1a.75.75 0 000 1.5h1a.75.75 0 000-1.5zm.75 2.25a.75.75 0 00-1.5 0v1a.75.75 0 001.5 0v-1z" />
          </svg>
          <span>Manage Cards</span>
        </div>
      </a>
    </div>
  </div>
</div>

<script>
  const dropdownButton = document.getElementById('dropdown-button');
  const dropdownMenu = document.getElementById('dropdown-menu');

  function toggleDropdown() {
    const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
    if (isExpanded) {
      dropdownMenu.classList.add('opacity-0', 'scale-95', 'invisible');
      dropdownMenu.classList.remove('opacity-100', 'scale-100', 'visible');
      dropdownButton.setAttribute('aria-expanded', 'false');
    } else {
      dropdownMenu.classList.remove('opacity-0', 'scale-95', 'invisible');
      dropdownMenu.classList.add('opacity-100', 'scale-100', 'visible');
      dropdownButton.setAttribute('aria-expanded', 'true');
    }
  }

  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)) {
      const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
      if (isExpanded) {
        toggleDropdown();
      }
    }
  });

  // Close dropdown on escape key
  document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape') {
      const isExpanded = dropdownButton.getAttribute('aria-expanded') === 'true';
      if (isExpanded) {
        toggleDropdown();
      }
    }
  });
</script>

Dropdown Menu Component

A simple, organic/nature-inspired dropdown menu component with a retro/vintage color palette, suitable for manufacturing/industrial companies. It features responsive design and dark mode support.

Open Preview

                <div class="relative inline-block text-left font-serif">
  <button id="dropdownButton" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-stone-100 text-sm font-medium text-amber-900 hover:bg-stone-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-stone-100 focus:ring-amber-500 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-offset-gray-900 dark:focus:ring-amber-400 opacity-90 transition-all duration-300 ease-in-out transform hover:scale-105">
    <svg class="-ml-1 mr-2 h-5 w-5 text-amber-700 dark:text-amber-400" 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>
    <span>Menu Options</span>
    <svg class="-mr-1 ml-2 h-5 w-5 text-amber-700 dark:text-amber-400" 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 dropdown state. -->
  <div id="dropdownMenu" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-stone-50 ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none dark:bg-gray-700 dark:divide-gray-600 opacity-0 scale-95 pointer-events-none transition-all duration-200 ease-out transform" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-0">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM13 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2h-2zM13 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2h-2z" />
        </svg>
        Production Overview
      </a>
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-1">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M6.267 19.510A2.898 2.898 0 0010 18c.95 0 1.85-.357 2.584-.96a1.597 1.597 0 011.758 0C13.565 17.59 14 17 14 17H6s-1.57-.406-2.584-1.96c-.734-.603-1.634-.96-2.584-.96H0zM14 6a2 2 0 00-2-2H8a2 2 0 00-2 2v6a2 2 0 002 2h4a2 2 0 002-2V6z" clip-rule="evenodd" />
        </svg>
        Quality Control
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-2">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 7a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
        </svg>
        Supply Chain
      </a>
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-3">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zm-2 2a1 1 0 00-1 1v3a1 1 0 001 1h2a1 1 0 001-1v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
        Maintenance Log
      </a>
    </div>
    <div class="py-1" role="none">
      <a href="#" class="text-amber-900 group flex items-center px-4 py-2 text-sm hover:bg-stone-200 hover:text-amber-700 dark:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-50" role="menuitem" tabindex="-1" id="menu-item-4">
        <svg class="mr-3 h-5 w-5 text-amber-700 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a2 2 0 012 2v8a2 2 0 01-2 2H6.5L3 18V6zm4 6a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
        </svg>
        Reports
      </a>
    </div>
  </div>
</div>

<script>
  // This script is for demonstration purposes to toggle the dropdown.
  // In a real application, you would use a JavaScript framework or library.
  document.addEventListener('DOMContentLoaded', function() {
    const dropdownButton = document.getElementById('dropdownButton');
    const dropdownMenu = document.getElementById('dropdownMenu');

    dropdownButton.addEventListener('click', function() {
      const isExpanded = dropdownMenu.classList.contains('scale-100');
      if (isExpanded) {
        dropdownMenu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        dropdownMenu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
      } else {
        dropdownMenu.classList.remove('opacity-0', 'scale-95', 'pointer-events-none');
        dropdownMenu.classList.add('opacity-100', 'scale-100', 'pointer-events-auto');
      }
    });

    // Close the dropdown if the user clicks outside of it
    window.addEventListener('click', function(event) {
      if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
        dropdownMenu.classList.remove('opacity-100', 'scale-100', 'pointer-events-auto');
        dropdownMenu.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
      }
    });
  });
</script>