Composant de menu déroulant
Composant de menu déroulant réactif pour l’interface utilisateur en mode sombre
HTML Code
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<div class="dark:bg-gray-900 dark:text-white 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-offset-gray-100 dark:focus:ring-offset-gray-800 focus:ring-indigo-500" 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 bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 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-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
<a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
<a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
<form method="POST" action="#" role="none">
<button type="submit" class="text-gray-700 dark:text-gray-200 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-3">
Sign out
</button>
</form>
</div>
</div>
</div>
</div>Composants associés
Composant de menu déroulant
Un composant de menu déroulant inspiré de Material Design adapté à un portfolio, avec des couleurs analogues, une réactivité et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de menu déroulant
Un composant de menu déroulant simple de style industriel pour les sites Web d’actualités/journalisme, avec une palette de couleurs forêt/vert et la prise en charge du mode sombre. Conçu pour être réactif sur tous les appareils.
Composant de menu déroulant
Composant de menu déroulant pour le commerce électronique avec Material Design, schéma de couleurs analogue et interactions complexes à l’aide de Tailwind CSS. Il est réactif et prend en charge le thème sombre sans JavaScript.