Menú desplegable Componente 5
Un componente de menú desplegable responsivo diseñado para el modo oscuro, que utiliza Tailwind CSS para el estilo y el diseño. El componente presenta un diseño elegante, efectos de desplazamiento y soporte para temas oscuros, lo que garantiza una experiencia de interfaz de usuario moderna.
Código HTML
<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>Componentes relacionados
Menú desplegable de brutalismo
Un componente de menú desplegable de estilo brutalista en escala de grises, adecuado para sitios web comerciales. Cuenta con una interfaz compleja de múltiples elementos con diseño receptivo y soporte de modo oscuro usando Tailwind CSS.
Menú desplegable Componente 20
Un componente de menú desplegable con un estilo de diseño brutalista que utiliza Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Componente de menú desplegable
Un componente de menú desplegable responsivo diseñado con los principios de Material Design, que admite un tema oscuro y utiliza un esquema de color complementario. Apto para blogs y consumo de contenidos.