Componente de menú desplegable
Componente de menú desplegable receptivo para la interfaz de usuario del modo oscuro
Código HTML
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<div class="dark:bg-gray-900 dark:text-white min-h-screen p-8">
<div class="relative inline-block text-left">
<div>
<button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 dark:focus:ring-offset-gray-800 focus:ring-indigo-500" 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>
<!-- Dropdown menu, show/hide based on menu state. -->
<div class="origin-top-right absolute right-0 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="menu-button" tabindex="-1">
<div class="py-1" role="none">
<!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
<a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
<a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
<a href="#" class="text-gray-700 dark:text-gray-200 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
<form method="POST" action="#" role="none">
<button type="submit" class="text-gray-700 dark:text-gray-200 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-3">
Sign out
</button>
</form>
</div>
</div>
</div>
</div>Componentes relacionados
Menú desplegable de blog retro
Un menú desplegable retro-vintage responsivo para el contenido del blog. Cuenta con un esquema de color triádico simple y compatibilidad con el modo oscuro mediante Tailwind CSS. Sin JavaScript.
Componente de menú desplegable
Un componente de menú desplegable responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, compatible con el modo oscuro e incluyendo imágenes de marcador de posición.
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.