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

Retro-Dashboard-Navigationskomponente

Retro/Vintage-Navigationskomponente für Dashboard mit lebendigen Farben, mäßiger Komplexität, Reaktionsfähigkeit und Unterstützung für dunkle Themen.

Offen

Navigationskomponente

Eine einfache Navigationskomponente, die für einen Blog mit Mikrointeraktionen und pastellfarbenem Farbschema entwickelt wurde. Es verfügt über ein responsives Layout und Unterstützung für dunkle Themen.

Offen

Retro-Vintage-Navigationskomponente

Eine reaktionsschnelle Navigationskomponente mit Retro-/Vintage-Ästhetik, die von den Stilen der 80er/90er Jahre inspiriert ist, mit einem pastellfarbenen Farbschema. Geeignet für Social-Media-Schnittstellen, einschließlich Unterstützung des Dunkelmodus.

Offen