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

Dropdown-Menü-Komponente

Eine reaktionsschnelle Dropdown-Menükomponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS entwickelt wurde, den Dunkelmodus unterstützt und Platzhalterbilder enthält.

Vorschau

HTML-Code 

<div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700" aria-haspopup="true" aria-expanded="true" aria-controls="options">
      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.23 7.21a.75.75 0 011.06 0l3.47 3.47 3.47-3.47a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0l-4.24-4.24a.75.75 0 010-1.06z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <div class="absolute z-10 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Profile
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Account
      </a>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Dashboard
      </a>
      <div class="border-t border-gray-100 dark:border-gray-700"></div>
      <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
        Logout
      </a>
    </div>
  </div>
</div>

<div class="hidden md:flex md:items-center">
  <img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="h-10 w-10 rounded-full shadow-lg" />
  <span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-200">User Name</span>
</div>

Verwandte Komponenten

Dropdown-Menü Komponente 5

Eine reaktionsschnelle Dropdown-Menükomponente, die für den Dunkelmodus entwickelt wurde und Tailwind CSS für Styling und Layout verwendet. Die Komponente verfügt über ein schlankes Design, Hover-Effekte und Unterstützung für dunkle Themen, um ein modernes UI-Erlebnis zu gewährleisten.

Offen

Dropdown-Menü-Komponente

Eine reaktionsschnelle Dropdown-Menükomponente, die mit Mikrointeraktionen und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS entwickelt wurde.

Offen

Dropdown-Menü-Komponente

Responsive Dropdown-Menükomponente für die Benutzeroberfläche im Dunkelmodus

Offen