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.
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-transparent 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" 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-.02L10 10.293l3.71-3.11a.75.75 0 111.01 1.11l-4.25 3.5a.75.75 0 01-1.01 0l-4.25-3.5a.75.75 0 01-.02-1.06z" clip-rule="evenodd" />
</svg>
</button>
</div>
<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 z-10" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
<img src="https://picsum.photos/40?random=1" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
Profile
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
<img src="https://picsum.photos/40?random=2" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
Settings
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
<img src="https://picsum.photos/40?random=3" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
Notifications
</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700" role="menuitem">
<img src="https://picsum.photos/40?random=4" alt="Avatar" class="inline-block w-8 h-8 rounded-full mr-2">
Log out
</a>
</div>
</div>
</div>
<style>
/* Brutalism styles for dark mode support */
[class*='bg-'] {
background-color: #ffffff;
}
[class*='text-'] {
color: #000000;
}
.bg-gray-800 {
background-color: #2d3748;
}
.dark .text-gray-300 {
color: #edf2f7;
}
.dark .hover\:bg-gray-700:hover {
background-color: #4a5568;
}
</style>
Componentes relacionados
RetroGamingMenú desplegable
Un componente de menú desplegable receptivo, de temática retro/vintage con un esquema de color apagado, adecuado para sitios web de juegos, con soporte para modo oscuro.
Componente de menú desplegable
Un componente de menú desplegable responsivo con estilo glassmorphism, adecuado para un blog o consumo de contenido, con soporte para temas oscuros.
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.