Cyberpunk Meteo Navigazione
Un componente di navigazione a tema cyberpunk semplice e reattivo per un'applicazione meteo, con colori tenui e accenti al neon, con supporto per la modalità oscura.
Codice HTML
<nav class="bg-neutral-900 py-4 dark:bg-black shadow-lg">
<div class="container mx-auto px-4 flex justify-between items-center">
<a href="#" class="text-blue-400 text-2xl font-bold font-mono tracking-widest dark:text-cyan-400 select-none">
<span class="text-blue-500 dark:text-cyan-500">WΞATHЯ</span><span class="text-neutral-500 dark:text-neutral-700">_SYS</span>
</a>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
Current
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
</a>
<a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
Forecast
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
</a>
<a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
Radar
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
</a>
<a href="#" class="text-neutral-400 hover:text-blue-400 transition-colors duration-300 relative group dark:text-neutral-500 dark:hover:text-cyan-400 font-mono text-sm uppercase">
Settings
<span class="absolute left-0 bottom-0 w-0 h-0.5 bg-blue-400 transition-all duration-300 group-hover:w-full dark:bg-cyan-400"></span>
</a>
</div>
<div class="md:hidden">
<button class="text-blue-400 text-2xl focus:outline-none dark:text-cyan-400" aria-label="Toggle navigation">
<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>
</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.
Navigazione giocosa nel cruscotto
Un componente di navigazione del cruscotto semplice, giocoso e reattivo che utilizza toni gioiello con elementi arrotondati e supporto completo della modalità scura.
Componente di navigazione Brutalismo
Un componente di navigazione reattivo progettato in stile brutalista, che mostra una combinazione di colori monocromatica, ideale per un sito web portfolio. Le caratteristiche includono un layout audace con contrasto elevato, supporto della modalità oscura utilizzando Tailwind CSS ed elementi interattivi come menu a discesa o collegamenti ai pulsanti.