CCHub Logo CCHub Tailwind Collection
Komponenten Dropdown-Menü Dropdown-Menü-Komponente

Dropdown-Menü-Komponente

Eine von Material Design inspirierte Dropdown-Menü-Komponente, die für ein Portfolio geeignet ist und analoge Farben, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus mit Tailwind CSS bietet.

Vorschau

HTML-Code 

<div class="relative w-full md:w-64">
  <button class="flex items-center justify-between w-full px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100" id="options-menu" aria-haspopup="true" aria-expanded="true">
    <span>Options</span>
    <svg class="w-5 h-5 -mr-1" 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 class="absolute right-0 w-full mt-2 origin-top-right bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-800 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 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Account settings</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Support</a>
      <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">License</a>
      <form method="POST" action="#">
        <button type="submit" class="block w-full px-4 py-2 text-sm text-left text-gray-700 hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600" role="menuitem">Sign out</button>
      </form>
    </div>
  </div>
</div>

Verwandte Komponenten

Dropdown-Menü "Brutalismus"

Eine Dropdown-Menükomponente im brutalistischen Stil in Graustufen, die sich für Unternehmenswebsites eignet. Verfügt über eine komplexe, mehrteilige Benutzeroberfläche mit responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen

Dropdown-Menü-Komponente

Eine reaktionsschnelle Dropdown-Menükomponente für Social-Media-Schnittstellen mit dunklem Design und pastellfarbenem Farbschema. Es handelt sich um eine komplexe Komponente mit mehreren interaktiven Elementen, die entwickelt wurde, um die Belastung der Augen zu reduzieren.

Offen

Dropdown-Menü-Komponente

Dropdown-Menükomponente mit Mikrointeraktionen, lebendigen Farben und einfachem Layout für ein Portfolio, mit responsivem Design und Unterstützung für dunkle Themen.

Offen