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
Menú de hamburguesas skeuomórficas
Un componente de menú de hamburguesas responsivo diseñado con elementos skeuomórficos, colores vibrantes y soporte de temas oscuros para sitios de comercio electrónico.
Componente del menú de hamburguesas
Un componente de menú de hamburguesas skeuomórfico para un tablero con una combinación de colores pastel y un diseño minimalista.
Componente del menú de hamburguesas
Un componente complejo y receptivo del menú de hamburguesas con diseño de cristal, con un efecto translúcido similar al vidrio esmerilado, adecuado para un portafolio que exhibe trabajos o productos. Incluye un soporte de tema oscuro y utiliza Tailwind CSS para el estilo.