Componente de menú desplegable
Componente de menú desplegable con microinteracciones, colores vibrantes y diseño simple para un portafolio, con diseño receptivo y soporte de tema oscuro.
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 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700 transition transform hover:scale-105" id="menu-button" aria-expanded="true" aria-haspopup="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.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.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="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800 dark:ring-gray-700 hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
<form method="POST" action="#" role="none">
<button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-indigo-500 hover:text-white dark:text-gray-200 dark:hover:bg-indigo-600 transition duration-150 ease-in-out transform hover:-translate-y-0.5" role="menuitem" tabindex="-1" id="menu-item-3">
Sign out
</button>
</form>
</div>
</div>
</div>Componentes relacionados
Componente de menú desplegable
Un componente de menú desplegable simple de estilo industrial para sitios web de noticias/periodismo, con una paleta de colores bosque/verde y soporte para modo oscuro. Diseñado para ser receptivo en todos los dispositivos.
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.
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.