Componente del menú de hamburguesas
Un componente de menú de hamburguesa receptivo diseñado en estilo Material Design con soporte de tema oscuro, adecuado para la navegación en el tablero.
Código HTML
<div class="bg-gray-800 text-white h-screen flex flex-col">
<div class="flex justify-between items-center p-5">
<div class="text-2xl font-bold">Dashboard</div>
<button id="menu-toggle" class="focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" 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 id="menu" class="hidden bg-gray-700 p-4 rounded-lg shadow-lg">
<ul class="space-y-2">
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Home</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Profile</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Settings</a></li>
<li><a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded">Logout</a></li>
</ul>
</div>
<div class="flex-1 p-5">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
<div class="text-xl font-semibold">Card Title 1</div>
<p class="text-gray-400">Some descriptive text for this card.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
<div class="text-xl font-semibold">Card Title 2</div>
<p class="text-gray-400">Some descriptive text for this card.</p>
</div>
<div class="bg-gray-700 p-4 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=3" alt="Sample image" class="w-full h-32 object-cover rounded-lg mb-2">
<div class="text-xl font-semibold">Card Title 3</div>
<p class="text-gray-400">Some descriptive text for this card.</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente del menú de hamburguesas
Un componente de menú de hamburguesas receptivo diseñado con un estilo 3D, adecuado para fines de tablero. Incorpora un esquema de color triádico y tiene una interfaz compleja con elementos interactivos, que admite temas claros y oscuros.
Menú de hamburguesas de comercio electrónico retro
Un componente de menú de hamburguesas complejo, receptivo y compatible con el modo oscuro para comercio electrónico, con un estilo retro / vintage (años 80 / 90) y un esquema de color complementario (púrpura, cian, dorado). Cuenta con navegación principal, enlaces de cuentas, carrito, búsqueda y un interruptor de CSS puro usando el truco de casilla de verificación. Utiliza clases CSS de Tailwind.
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.