CCHub Logo CCHub Tailwind Collection
Komponenten Navigation RetroNav

RetroNav

Eine einfache, reaktionsschnelle und mit dem Dunkelmodus kompatible Navigationskomponente mit Retro-/Vintage-Design, lebendigem Farbschema und minimalen Elementen, die für E-Commerce-Websites geeignet ist.

Vorschau

HTML-Code 

<nav class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600 p-4">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-white text-2xl font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-white hover:text-gray-200">Home</a>
      <a href="#" class="text-white hover:text-gray-200">Products</a>
      <a href="#" class="text-white hover:text-gray-200">About</a>
      <a href="#" class="text-white hover:text-gray-200">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>
    </div>
  </div>
</nav>

Verwandte Komponenten

3D_Candy_Finance_Navigation

Eine einfache, reaktionsschnelle Navigationskomponente für Finanz-/Bankanwendungen mit einem bonbonfarbenen Farbschema und subtilen 3D-Designelementen mit Unterstützung für den Dunkelmodus.

Offen

Brutalistischer E-Commerce Navigation

Eine Navigationskomponente im brutalistischen Stil für den E-Commerce mit einem Graustufen-Farbschema, einem komplexen Layout, Reaktionsfähigkeit und Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.

Offen

Dashboard-Navigation (Material Design)

Material Design Dashboard-Navigationskomponente mit triadischem Farbschema und Unterstützung für den Dunkelmodus.

Offen