Cyberpunk Météo Navigation
Un composant de navigation simple et réactif sur le thème du cyberpunk pour une application météo, avec des couleurs sourdes et des accents néon, avec prise en charge du mode sombre.
HTML Code
<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>Composants associés
Swiss_International_Navigation_Fashion_Beauty
Un composant de navigation complexe et réactif pour les marques de mode/beauté, adhérant aux principes de conception de la typographie suisse/internationale avec une palette de couleurs bleues d’entreprise. Comprend la prise en charge du mode sombre et plusieurs éléments interactifs.
Navigation sur les réseaux sociaux
Un composant de navigation réactif sur les réseaux sociaux avec une palette de couleurs sourdes/désaturées, inspiré des principes de conception matérielle, prenant en charge les modes clair et sombre. Dispose d’une mise en page basée sur une grille et d’effets de profondeur.
Composant de navigation dans le portefeuille
Un composant de navigation réactif pour un site web de portfolio, inspiré de l’esthétique du papier/de l’impression avec des tons crépuscules/chauds. Comprend la prise en charge du mode sombre et une mise en page épurée adaptée à la présentation du travail.