Komponenten Navigationsleiste Cyberpunk_Retro_Food_Navbar

Cyberpunk_Retro_Food_Navbar

Eine einfache, reaktionsschnelle Navigationsleiste mit Cyberpunk-Retro-Ästhetik, die für Food-/Restaurant-Websites entwickelt wurde. Mit dunklem Hintergrund, gedämpften Akzentfarben und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code

<nav class="bg-zinc-900 shadow-lg p-4 font-mono dark:bg-zinc-950">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-orange-400 text-2xl font-bold tracking-wider uppercase hover:text-orange-300 transition-colors duration-300 transform hover:scale-105">
      <span class="text-teal-400">&lt;</span>Bite<span class="text-teal-400">/&gt;</span>Stream
    </a>

    <!-- Mobile Menu Button -->
    <div class="md:hidden">
      <button class="text-gray-300 hover:text-orange-400 focus:outline-none focus:text-orange-400 dark:text-gray-400 dark:hover:text-orange-300">
        <svg class="h-6 w-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 12h16m-4 6h4"></path>
        </svg>
      </button>
    </div>

    <!-- Desktop Navigation Links -->
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Menu
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Orders
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        About
      </a>
      <a href="#" class="text-gray-400 hover:text-teal-400 transition-colors duration-300 text-lg">
        Contact
      </a>
      <a href="#" class="bg-teal-600 text-white px-4 py-1 rounded-md text-lg hover:bg-teal-500 transition-colors duration-300 neon-button">
        Sign In
      </a>
    </div>
  </div>
</nav>

Verwandte Komponenten

Skeuomorphe Navigationsleiste

Eine reaktionsschnelle Navigationsleistenkomponente, die in einem skeuomorphen Stil mit Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS entworfen wurde.

Offen

Brutalistische Navigationsleiste

Eine reaktionsschnelle Navigationsleiste in einem brutalistischen Stil mit Farben mit hoher Sättigung für den Konsum von Blogs und Inhalten mit Unterstützung für dunkle Themen.

Offen

Komponente der Navigationsleiste

Eine einfache, reaktionsschnelle Navigationsleistenkomponente, die für ein Dashboard entwickelt wurde und sich durch ein monochromatisches Farbschema und Mikrointeraktionen auszeichnet. Es enthält eine Unterstützung für den Dunkelmodus mit Hover-Effekten für ansprechende Animationen.

Offen