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.
Codice HTML
<nav class="bg-gray-900 text-white">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center">
<svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
<span class="text-xl font-bold">MyCompany</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-purple-400">Home</a>
<a href="#" class="hover:text-purple-400">About</a>
<a href="#" class="hover:text-purple-400">Services</a>
<a href="#" class="hover:text-purple-400">Contact</a>
</div>
<div class="hidden md:block">
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
</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 12h16m-7 6h7"></path></svg>
</button>
</div>
</div>
</div>
</nav>Componenti correlati
Componenti di navigazione
Un componente di navigazione reattivo che segue i principi del Material Design con una combinazione di colori triadica, rivolto alle interfacce dei social media, con supporto per la modalità scura.
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.
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.