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

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.

Vorschau

HTML-Code 

<div class="dark:bg-gray-900 min-h-screen p-8">
  <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-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" id="options-menu" aria-haspopup="true" aria-expanded="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>

    <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" 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-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">
          <div class="flex items-center">
            <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="">
            <span>Profile</span>
          </div>
        </a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">
          <div class="flex items-center">
            <img class="h-6 w-6 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="">
            <span>Friends</span>
          </div>
        </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-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Settings</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Notifications
          <span class="inline-flex items-center justify-center px-2 py-0.5 ml-2 text-xs font-semibold leading-none text-red-100 dark:text-red-800 bg-red-600 dark:bg-red-200 rounded-full">3</span>
        </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-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Share Post</a>
        <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-indigo-100 dark:hover:bg-indigo-600 hover:text-indigo-900 dark:hover:text-white" role="menuitem">Logout</a>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

3D_Marketplace_Dropdown_Menu

Eine komplexe, 3D-inspirierte Dropdown-Menü-Komponente, die für Marktplatzplattformen entwickelt wurde, mit warmen, neutralen Farben, mehrstufiger Navigation und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Es sorgt für Tiefe und Engagement durch subtile Schatten und Übergänge.

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

Dropdown-Menü-Komponente für E-Commerce mit Materialdesign, analogem Farbschema und komplexen Interaktionen mit Tailwind CSS. Es ist reaktionsschnell und unterstützt dunkles Design ohne JavaScript.

Offen