Composant de menu déroulant
Un composant de menu déroulant réactif conçu selon les principes de Material Design, prenant en charge un thème sombre et utilisant une palette de couleurs complémentaire. Convient pour les blogs et la consommation de contenu.
HTML Code
<div class="relative inline-block text-left">
<div>
<button type="button" class="flex rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 focus:outline-none dark:bg-blue-800 dark:hover:bg-blue-700" 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.23 7.21a.75.75 0 011.06 0l4.47 4.47 4.47-4.47a.75.75 0 111.06 1.06l-5 5a.75.75 0 01-1.06 0l-5-5a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="hidden origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">Account settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">Support</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">License</a>
<div class="border-t border-gray-100 dark:border-gray-700"></div>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">Sign out</a>
</div>
</div>
</div>
<div class="p-2">
<img src="https://picsum.photos/200/100" alt="Example Image" class="rounded-md shadow-md">
</div>
<div class="p-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-blue-600 dark:border-blue-800">
</div>Composants associés
Composant de menu déroulant
Un composant de menu déroulant complexe et réactif conçu pour la documentation ou les sites wiki, avec un style de typographie suisse/international épuré et minimaliste avec une palette de couleurs océan/bleu. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.
Menu déroulant du mode sombre Cyberpunk
Un composant de menu déroulant complexe, sur le thème du cyberpunk, pour un tableau de bord, avec des arrière-plans sombres, des couleurs en niveaux de gris avec de subtils accents vifs et une réactivité totale.
Composant de menu déroulant
Composant de menu déroulant réactif pour l’interface utilisateur en mode sombre