Menu déroulant Composant 5
Composant de menu déroulant réactif conçu pour le mode sombre, utilisant Tailwind CSS pour le style et la mise en page. Le composant présente un design élégant, des effets de survol et la prise en charge des thèmes sombres, garantissant une expérience d’interface utilisateur moderne.
HTML Code
<div class="relative inline-block text-left">
<div>
<button class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-gray-800 text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="options-menu" 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 0L10 10.293l3.71-3.09a.75.75 0 111.02 1.1l-4 3.333a.75.75 0 01-1.02 0l-4-3.333a.75.75 0 010-1.1z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="absolute right-0 z-10 mt-2 w-56 rounded-md shadow-lg bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
Profile
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
<img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" />
Settings
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
<img class="h-8 w-8 rounded-full mr-2" src="https://picsum.photos/id/1/200/200" alt="Placeholder" />
My Images
</a>
<a href="#" class="flex items-center px-4 py-2 text-sm text-gray-400 hover:bg-gray-700 hover:text-white" role="menuitem">
<img class="h-8 w-8 rounded-full mr-2" src="https://picsum.photos/id/2/200/200" alt="Placeholder" />
Logout
</a>
</div>
</div>
</div>Composants associés
Composant de menu déroulant
Un composant de menu déroulant réactif pour les interfaces de médias sociaux, avec un thème sombre et une palette de couleurs pastel. Il s’agit d’un composant complexe avec de multiples éléments interactifs, conçu pour réduire la fatigue oculaire.
Composant de menu déroulant
Un composant de menu déroulant simple, de style glassmorphism, pour le commerce électronique, avec un design réactif et une prise en charge du mode sombre.
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.