Composant de menu déroulant
Un composant de menu déroulant réactif conçu pour une utilisation professionnelle, avec des micro-interactions et des couleurs complémentaires. Il prend en charge les thèmes clairs et sombres et utilise Tailwind CSS pour le style.
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 dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 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-indigo-400" aria-haspopup="true" aria-expanded="true" aria-controls="options" id="options-button">
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 0L10 10.354l3.71-3.144a.75.75 0 111.04 1.083l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.083z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="absolute z-10 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="options-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Edit</a>
<a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Duplicate</a>
<a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Delete</a>
<form method="POST" action="#" role="none">
<button type="submit" class="text-gray-700 dark:text-gray-300 block w-full text-left px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Archive</button>
</form>
</div>
</div>
</div>
Composants associés
Composant de menu déroulant
Un composant de menu déroulant réactif conçu avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Menu déroulant Rétro/Vintage
Un composant complexe de menu déroulant conçu pour le commerce électronique avec une esthétique rétro/vintage, avec des couleurs monochromes, une interface riche et un design réactif incluant la prise en charge du mode sombre.
Menu déroulant Composant 20
Un composant de menu déroulant avec un style de conception brutaliste utilisant Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre.