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

Glassmorphism_Navigation_Simple_Sunset

Eine einfache, reaktionsschnelle Glassmorphism-Navigationskomponente mit Sonnenuntergangs-/Warmtönen, geeignet für Geschäfts-/Unternehmenswebsites. Verfügt über durchscheinende Elemente und unterstützt den Dunkelmodus.

Offen

Navigationskomponente 43

Eine reaktionsschnelle Navigationskomponente, die skeuomorphen Designprinzipien folgt, mit digitalen Elementen, die ihre realen Gegenstücke nachahmen, mit Unterstützung für dunkle Themen.

Offen

Social-Media-Navigationskomponente

Eine einfache, reaktionsschnelle Navigationskomponente für Social-Media-Anwendungen mit einem dunklen Thema und einem vom Material Design inspirierten ergänzenden Farbschema. Es enthält ein Logo, Navigationslinks und einen Benutzer-Avatar.

Offen