Componente del menu dell'hamburger
Un componente del menu dell'hamburger reattivo progettato per l'uso nella dashboard, disegnato in un design 3D con una combinazione di colori in scala di grigi, adatto sia per temi chiari che scuri.
Codice HTML
<div class="bg-gray-200 dark:bg-gray-800 transition duration-300 ease-in-out p-4 rounded-lg shadow-lg transform hover:scale-105">
<div class="flex justify-between items-center">
<div class="text-lg font-bold text-gray-800 dark:text-white">Dashboard</div>
<button class="text-gray-800 dark:text-white focus:outline-none hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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>
<nav class="mt-4">
<ul class="space-y-2">
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Home</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Profile</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Settings</a>
</li>
<li class="p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-700">
<a href="#" class="block text-gray-800 dark:text-white">Logout</a>
</li>
</ul>
</nav>
</div>
Componenti correlati
Componente del menu dell'hamburger
Un complesso componente reattivo per il menu dell'hamburger con design glassmorphism, caratterizzato da un effetto traslucido simile al vetro smerigliato, adatto per un portfolio che mostra lavori o prodotti. Include un supporto per il tema scuro e utilizza Tailwind CSS per lo stile.
Componente del menu dell'hamburger
Un componente del menu dell'hamburger scheumorfico per una dashboard con una combinazione di colori pastello e un design minimalista.
Menù Hamburger E-commerce retrò
Un componente di menu per hamburger complesso, reattivo e supportato dalla modalità oscura per l'e-commerce, con un'estetica retrò/vintage (anni '80/'90) e una combinazione di colori complementari (viola, ciano, oro). Presenta la navigazione principale, i collegamenti all'account, il carrello, la ricerca e un interruttore CSS puro utilizzando l'hack della casella di controllo. Utilizza le classi CSS Tailwind.