Cyberpunk_Food_Nav
Un componente di navigazione semplice e reattivo a tema cyberpunk per siti Web di cibo/ristoranti, con sfondi scuri, accenti al neon e supporto per la modalità oscura.
Codice HTML
<header class="bg-zinc-950 dark:bg-black text-lime-400 p-4 shadow-lg shadow-lime-900/30 dark:shadow-fuchsia-900/30">
<nav class="container mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-bold font-mono tracking-wider transition-colors duration-300 hover:text-lime-200 dark:hover:text-fuchsia-400">
BYTE BITES
</a>
<div class="hidden md:flex space-x-6 text-lg">
<a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
<span class="relative z-10">Menu</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
<span class="relative z-10">Order</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
<span class="relative z-10">Locations</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
<a href="#" class="hover:text-lime-200 dark:hover:text-fuchsia-400 transition-colors duration-300 relative group">
<span class="relative z-10">Contact</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-lime-400 dark:bg-fuchsia-400 scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></span>
</a>
</div>
<div class="md:hidden">
<button class="text-lime-400 dark:text-fuchsia-400 focus:outline-none focus:ring-2 focus:ring-lime-600 dark:focus:ring-fuchsia-600 rounded-md p-1">
<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 12h16M4 18h16"></path>
</svg>
</button>
</div>
</nav>
</header>Componenti correlati
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.
Swiss_International_Navigation_Fashion_Beauty
Un componente di navigazione complesso e reattivo per i marchi di moda/bellezza, che aderisce ai principi di progettazione della tipografia svizzera/internazionale con una combinazione di colori blu aziendale. Include il supporto per la modalità oscura e più elementi interattivi.
Navigazione sui social media
Un componente di navigazione per social media pulito e minimalista con una tavolozza verde bosco, progettato per layout reattivi e modalità scura. Dispone di una navigazione principale, un profilo utente e una ricerca.