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.
Código HTML
<div class="flex items-center justify-between p-4 bg-pastel-light dark:bg-pastel-dark rounded-lg shadow-lg">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Dashboard</h1>
</div>
<button class="flex items-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
<div class="hamburger">
<div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
<div class="w-6 h-1 bg-gray-800 dark:bg-gray-200 mb-1"></div>
<div class="w-6 h-1 bg-gray-800 dark:bg-gray-200"></div>
</div>
</button>
</div>
<div class="hidden lg:block bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg mt-2">
<ul class="space-y-2">
<li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
<span class="text-gray-800 dark:text-gray-200">User Profile</span>
</li>
<li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
<span class="text-gray-800 dark:text-gray-200">Settings</span>
</li>
<li class="flex items-center p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="rounded-full h-8 w-8 mr-2">
<span class="text-gray-800 dark:text-gray-200">Logout</span>
</li>
</ul>
</div>
<style>
.hamburger {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>Componentes relacionados
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.
Componente del menú de hamburguesas
Un menú de hamburguesas receptivo diseñado para interfaces de redes sociales con un tema de modo oscuro y una combinación de colores complementaria.
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.