Composant de menu déroulant
Un composant de menu déroulant réactif stylisé avec glassmorphism, adapté à un blog ou à la consommation de contenu, avec prise en charge du thème sombre.
HTML Code
<div class="relative inline-block text-left">
<div>
<button type="button" class="flex items-center justify-between w-full rounded-md border border-transparent bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-50 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-opacity-40 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" aria-haspopup="true" aria-expanded="true" aria-controls="dropdown-menu">
Menu
<svg class="w-5 h-5 ml-2 -mr-1" 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 011.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="hidden z-10 mt-2 w-56 rounded-md shadow-lg bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-50 ring-1 ring-black ring-opacity-5" id="dropdown-menu" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700" role="menuitem">Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700" role="menuitem">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700" role="menuitem">Sign out</a>
</div>
</div>
</div>
<div class="mt-8 flex items-center justify-center">
<div class="relative w-16 h-16 rounded-full overflow-hidden bg-white bg-opacity-30 dark:bg-gray-800 dark:bg-opacity-50">
<img src="https://picsum.photos/seed/picsum/200/200" alt="Random" class="object-cover w-full h-full rounded-full">
</div>
</div>
Composants associés
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.
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.
Composant de menu déroulant
Un menu déroulant réactif avec un design Glassmorphism utilisant Tailwind CSS, prenant en charge le mode sombre et présentant des effets d’arrière-plan flous.