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 receptivo con un diseño brutalista, con alto contraste, estilos audaces y compatibilidad con el modo oscuro.
Componente del menú de hamburguesas
Un componente receptivo del menú de hamburguesas diseñado en estilo brutalismo con una combinación de colores pastel. Adecuado para un portafolio que exhibe trabajos o productos.
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.