Cyberpunk Weather Navigation
A simple, responsive cyberpunk-themed navigation component for a weather application, featuring muted colors and neon accents, with dark mode support.
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>
Related Components
Navigation Components
A minimalist navigation component for an e-commerce website, featuring a logo, search bar, navigation links, shopping cart icon, and user avatar using Tailwind CSS. This component supports responsive design and dark mode.
Navigation Component
A responsive navigation component designed with Microinteractions and featuring engaging animations based on user actions, supporting both light and dark themes. The component includes profile avatar, navigation links, and hover effects.
Navigation Components Component
Glassmorphism Monochromatic Moderate E-commerce Navigation Component with Dark Mode Support