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
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.
Componente di navigazione 43
Un componente di navigazione reattivo che segue i principi del design scheumorfico, con elementi digitali che imitano le loro controparti del mondo reale, con supporto per temi scuri.
RetroDashboardNavigazione
Un complesso componente di navigazione dashboard a tema retrò con combinazione di colori triadica, progettato per la visualizzazione dei dati e i pannelli di controllo. Presenta un design reattivo, supporto per la modalità oscura e molteplici elementi interattivi ispirati all'estetica degli anni '80/'90.