Componente Componenti di navigazione
Un componente di navigazione complesso e reattivo per i dashboard, caratterizzato da microinterazioni e una combinazione di colori analoga, con supporto della modalità scura. Utilizza Tailwind CSS per lo stile e include elementi interattivi senza fare affidamento su JavaScript.
Codice HTML
<nav class="bg-gradient-to-r from-teal-400 via-emerald-500 to-cyan-500 dark:from-teal-800 dark:via-emerald-900 dark:to-cyan-900 p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="text-white text-2xl font-bold">Dashboard</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
Home
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
<a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
Analytics
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
<a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
Reports
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
<a href="#" class="text-white hover:text-gray-200 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 relative group">
Settings
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-white scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-out"></span>
</a>
</div>
<div class="md:hidden">
<button class="text-white focus:outline-none">
<svg class="w-6 h-6" 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 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
<div class="md:hidden mt-4">
<a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Home</a>
<a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Analytics</a>
<a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Reports</a>
<a href="#" class="block text-white hover:text-gray-200 py-2 transition duration-300 ease-in-out transform hover:translate-x-2">Settings</a>
</div>
</nav>Componenti correlati
Navigazione Neumorfica sui Social Media
Un componente di navigazione per social media semplice e reattivo con un design neumorfico dell'interfaccia utente morbido. Utilizza una combinazione di colori monocromatica e supporta la modalità oscura.
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.
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.