Navigazione giocosa nel cruscotto
Un componente di navigazione del cruscotto semplice, giocoso e reattivo che utilizza toni gioiello con elementi arrotondati e supporto completo della modalità scura.
Codice HTML
<nav class="bg-emerald-400 dark:bg-emerald-800 p-4 rounded-b-3xl shadow-lg">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
<a href="#" class="text-white text-2xl font-bold tracking-tight mb-4 md:mb-0 dark:text-emerald-100">Dashboard Fun</a>
<button class="md:hidden text-white dark:text-emerald-100 focus:outline-none" aria-label="Toggle navigation">
<svg class="w-8 h-8" 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-4 6h4"></path>
</svg>
</button>
<ul class="hidden md:flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 text-lg">
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Overview</span>
</a>
</li>
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Analytics</span>
</a>
</li>
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Reports</span>
</a>
</li>
<li>
<a href="#" class="text-white hover:text-emerald-100 dark:text-emerald-100 dark:hover:text-white transition duration-300 ease-in-out px-3 py-2 rounded-full hover:bg-emerald-500 dark:hover:bg-emerald-700">
<span class="block md:inline">Settings</span>
</a>
</li>
</ul>
<!-- Mobile menu (hidden by default) - A JavaScript toggle would be needed for this -->
<ul class="md:hidden flex-col items-center mt-4 space-y-3 w-full text-lg" id="mobile-menu-items">
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Overview
</a>
</li>
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Analytics
</a>
</li>
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Reports
</a>
</li>
<li>
<a href="#" class="text-white dark:text-emerald-100 w-full text-center block py-2 rounded-full bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-700 dark:hover:bg-emerald-600 transition duration-300 ease-in-out">
Settings
</a>
</li>
</ul>
</div>
</nav>Componenti correlati
Componenti di navigazione
Un componente di navigazione progettato con uno stile brutalista, caratterizzato da una combinazione di colori pastello per le interfacce dei social media, con un layout reattivo e supporto per temi scuri.
Componente Componenti di navigazione
Un componente di navigazione reattivo con supporto per la modalità oscura utilizzando Tailwind CSS. Include un logo, link di navigazione e un pulsante di invito all'azione.
Componente di navigazione
Un componente di navigazione reattivo progettato con microinterazioni e caratterizzato da animazioni coinvolgenti basate sulle azioni dell'utente, che supportano temi chiari e scuri. Il componente include l'avatar del profilo, i collegamenti di navigazione e gli effetti al passaggio del mouse.