Componente del menú de hamburguesas
Un componente de menú de hamburguesa receptivo diseñado con estilo brutalismo usando Tailwind CSS, con soporte para modo oscuro y marcadores de posición para imágenes y avatares.
Código HTML
<div class="flex items-center justify-between p-5 bg-gray-800 text-white">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full mr-3">
<span class="text-2xl font-bold">Brutalism Menu</span>
</div>
<div class="lg:hidden">
<button id="menu-toggle" class="flex items-center justify-center h-10 w-10 rounded-md bg-gray-600 hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-200">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
</button>
</div>
<div class="hidden lg:flex space-x-4">
<a href="#" class="font-semibold hover:text-gray-400">Home</a>
<a href="#" class="font-semibold hover:text-gray-400">About</a>
<a href="#" class="font-semibold hover:text-gray-400">Services</a>
<a href="#" class="font-semibold hover:text-gray-400">Contact</a>
</div>
</div>
<div id="menu" class="lg:hidden bg-gray-900 text-white fixed top-0 left-0 w-full h-full z-50 hidden">
<div class="flex flex-col items-center justify-center h-full space-y-4">
<a href="#" class="text-lg font-bold hover:text-gray-400">Home</a>
<a href="#" class="text-lg font-bold hover:text-gray-400">About</a>
<a href="#" class="text-lg font-bold hover:text-gray-400">Services</a>
<a href="#" class="text-lg font-bold hover:text-gray-400">Contact</a>
<button class="mt-6 h-10 w-10 bg-red-600 hover:bg-red-500 rounded-full">
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-gray-800 { background-color: #1a1a1a; }
.bg-gray-900 { background-color: #121212; }
}
</style>Componentes relacionados
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.
Componente del menú de hamburguesas
Un componente de menú de hamburguesas receptivo con un diseño brutalista, con alto contraste, estilos audaces y compatibilidad con el modo oscuro.
Componente del menú de hamburguesas
Un componente de menú de hamburguesas complejo, receptivo y vibrante con microinteracciones para el comercio electrónico, con una navegación deslizable, enlaces de categoría, una barra de búsqueda e íconos de redes sociales. Es compatible con el modo oscuro y utiliza Lorem Picsum para las imágenes.