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.
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-offset-gray-100 focus:ring-indigo-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700" aria-haspopup="true" aria-expanded="true" aria-controls="options">
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 0l3.47 3.47 3.47-3.47a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0l-4.24-4.24a.75.75 0 010-1.06z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="absolute z-10 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
<div class="py-1" role="none">
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
Profile
</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
Account
</a>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
Dashboard
</a>
<div class="border-t border-gray-100 dark:border-gray-700"></div>
<a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white" role="menuitem">
Logout
</a>
</div>
</div>
</div>
<div class="hidden md:flex md:items-center">
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="h-10 w-10 rounded-full shadow-lg" />
<span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-200">User Name</span>
</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.
Componente de menú desplegable
Un menú desplegable simple y receptivo con un diseño 3D en tonos tierra, adecuado para blogs o sitios de contenido. Incluye soporte para modo oscuro.
Componente de menú desplegable
Un menú desplegable responsivo de estilo 3D para paneles, con esquema de color triádico y compatibilidad con modo oscuro.