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 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.
Memphis_Vibrant_Marketplace_Dropdown_Menu
Un composant de menu déroulant complexe et réactif pour une place de marché, conçu avec une esthétique vibrante de style Memphis. Dispose de couleurs vives, de formes géométriques et d’une prise en charge du mode sombre.
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.