Menú de hamburguesas Componente 19
Un componente esquelético del menú de hamburguesas diseñado en estilo skeuomórfico, que imita elementos del mundo real. Es responsivo e incluye soporte para el modo oscuro usando Tailwind CSS.
Código HTML
<div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden w-64">
<div class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 p-4 rounded-t-lg">
<h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Menu</h1>
<button class="focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-800 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div class="p-4 space-y-4">
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Home</span>
</div>
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40?random=1" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">About</span>
</div>
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40?random=2" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Services</span>
</div>
<div class="flex items-center p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition">
<img src="https://picsum.photos/40/40?random=3" alt="Avatar" class="rounded-full mr-2">
<span class="text-gray-800 dark:text-gray-200">Contact</span>
</div>
</div>
<div class="absolute bottom-0 left-0 right-0 bg-gray-300 dark:bg-gray-700 p-4 rounded-b-lg">
<a href="#" class="text-gray-800 dark:text-gray-200 hover:underline">Log Out</a>
</div>
</div>Componentes relacionados
Componente del menú de hamburguesas
Un componente de menú de hamburguesas receptivo con un efecto de neón / brillo, combinación de colores de alto contraste y compatibilidad con modo oscuro, adecuado para sitios web de moda y belleza.
Menú de hamburguesas brutalismo
Componente de menú de hamburguesa inspirado en el brutalismo para el tablero con esquema de color análogo, complejidad moderada, diseño receptivo y soporte de tema oscuro con Tailwind CSS. Sin JavaScript.
Menú de hamburguesas Glassmorphism
Un componente de menú de hamburguesas simple y receptivo con diseño Glassmorphism, combinación de colores complementaria y compatibilidad con el modo oscuro.