Composant de menu déroulant
Composant de menu déroulant réactif conçu selon les principes de Material Design à l’aide de Tailwind CSS, prenant en charge le mode sombre et incluant des images de repère d’emplacement.
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>Composants associés
Composant de menu déroulant 3D
Un composant de menu déroulant réactif avec une palette de couleurs vives, conçu pour la présentation de portfolio. Il présente un design 3D avec des éléments interactifs, adapté au mode sombre.
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.
Composant de menu déroulant
Un menu déroulant réactif avec prise en charge des micro-interactions et du thème sombre construit avec Tailwind CSS.