CCHub Logo CCHub Tailwind Collection
Komponenten Navigations-Komponenten Cyberpunk Wetter-Navigation

Cyberpunk Wetter-Navigation

Eine einfache, reaktionsschnelle Navigationskomponente im Cyberpunk-Stil für eine Wetteranwendung mit gedämpften Farben und Neonakzenten sowie Unterstützung für den Dunkelmodus.

Vorschau

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>

Verwandte Komponenten

Navigationskomponente

Eine reaktionsschnelle Navigationskomponente, die mit Mikrointeraktionen entwickelt wurde und ansprechende Animationen bietet, die auf Benutzeraktionen basieren und sowohl helle als auch dunkle Themen unterstützen. Die Komponente enthält einen Profil-Avatar, Navigationslinks und Hover-Effekte.

Offen

Monospace_Developer_Simple_Finance_Navigation

Eine einfache, saubere, vom Code inspirierte Navigationskomponente für Finanz-/Bankschnittstellen mit Monospace-Schriftarten, warmen Sonnenuntergangstönen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Offen

Brutalistische Navigationskomponente

Eine brutalistische Navigationskomponente mit reaktionsschnellem Verhalten und Unterstützung für dunkle Themen.

Offen