Componente de menú desplegable
Un componente de menú desplegable receptivo diseñado para uso comercial/corporativo, con microinteracciones y colores complementarios. Es compatible con temas claros y oscuros y utiliza Tailwind CSS para el estilo.
Código HTML
<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 dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-indigo-400" aria-haspopup="true" aria-expanded="true" aria-controls="options" id="options-button">
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.354l3.71-3.144a.75.75 0 111.04 1.083l-4.25 3.5a.75.75 0 01-1.04 0l-4.25-3.5a.75.75 0 010-1.083z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="absolute z-10 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Edit</a>
<a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Duplicate</a>
<a href="#" class="text-gray-700 dark:text-gray-300 block px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Delete</a>
<form method="POST" action="#" role="none">
<button type="submit" class="text-gray-700 dark:text-gray-300 block w-full text-left px-4 py-2 text-sm hover:bg-indigo-600 dark:hover:bg-indigo-700 hover:text-white dark:hover:text-white" role="menuitem">Archive</button>
</form>
</div>
</div>
</div>
Componentes relacionados
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.
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.
Componente de menú desplegable
Un componente de menú desplegable receptivo para interfaces de redes sociales, con un tema oscuro y una combinación de colores pastel. Es un componente complejo con múltiples elementos interactivos, diseñado para reducir la fatiga visual.