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
Componente di navigazione crittografica in scala di grigi giocoso
Un componente di navigazione in scala di grigi giocoso e amichevole per applicazioni di criptovaluta e blockchain, con elementi arrotondati, stati interattivi, reattività completa e supporto per la modalità oscura.
Navigazione sociale brutalista
Un componente di navigazione semplice e brutalista per i social media con colori complementari. Include il design reattivo e il supporto per la modalità scura.
GamingNavigationComponent
Una barra di navigazione superiore complessa e reattiva per siti Web di giochi, ispirata a temi organici/naturali con una combinazione di colori analoga. Presenta un logo, collegamenti di navigazione, avatar utente e pulsanti di invito all'azione, con supporto completo della modalità scura.