CCHub Logo CCHub Tailwind Collection
Komponenten Navigations-Komponenten Cyberpunk_Food_Nav

Cyberpunk_Food_Nav

Eine einfache, reaktionsschnelle Cyberpunk-Navigationskomponente für Food-/Restaurant-Websites mit dunklem Hintergrund, Neon-Akzenten und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Neon Glow Regierungsnavigation

Eine reaktionsschnelle Navigationskomponente für Behörden/öffentliche Dienste mit Neonlicht, süßem Farbschema und Unterstützung für den Dunkelmodus. Mit hellen, leuchtenden Elementen mit lebendigen Lichteffekten.

Offen

Brutalistische Social-Media-Navigation

Eine reaktionsschnelle Navigationskomponente, die in einem brutalistischen Stil für Social-Media-Anwendungen entwickelt wurde und ein komplementäres Farbschema und minimale Elemente verwendet.

Offen

Komponente "Navigationskomponenten"

Eine komplexe, reaktionsschnelle Navigationskomponente für Dashboards mit Mikrointeraktionen und einem analogen Farbschema mit Unterstützung des Dunkelmodus. Verwendet Tailwind CSS für das Styling und enthält interaktive Elemente, ohne auf JavaScript angewiesen zu sein.

Offen