CCHub Logo CCHub Tailwind Collection
Komponenten Navigationsleiste Navigationsleiste im Dunkelmodus

Navigationsleiste im Dunkelmodus

Navigationsleistenkomponente mit responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<nav class="bg-gray-800 p-4 text-white">
  <div class="container mx-auto flex items-center justify-between">
    <div class="text-lg font-semibold">My Website</div>
    <div class="hidden md:flex space-x-4">
      <a href="#" class="hover:underline">Home</a>
      <a href="#" class="hover:underline">About</a>
      <a href="#" class="hover:underline">Services</a>
      <a href="#" class="hover:underline">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white focus:outline-none">
        <svg class="w-6 h-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>
  </div>
</nav>

Verwandte Komponenten

LuxusTravelNavBar

Eine einfache, elegante Navigationsleistenkomponente für Reise- und Tourismus-Websites mit luxuriösen Erdtönen, responsivem Design und Unterstützung für den Dunkelmodus.

Offen

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

Komponente der Navigationsleiste

Eine reaktionsschnelle Navigationsleisten-Komponente, die im Material Design-Stil mit triadischem Farbschema entworfen wurde, für Social-Media-Schnittstellen geeignet ist und Unterstützung für dunkle Themen bietet.

Offen