CCHub Logo CCHub Tailwind Collection
Komponenten Kopfball 3D-Design-Kopfzeile

3D-Design-Kopfzeile

Eine reaktionsschnelle Header-Komponente mit 3D-Designelementen und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<header class="bg-white shadow-lg dark:bg-gray-800">
  <div class="container mx-auto px-6 py-4">
    <div class="flex items-center justify-between">
      <div class="text-xl font-semibold text-gray-700 dark:text-white">3D Header</div>
      <div class="hidden md:block">
        <nav>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Home</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">About</a>
          <a href="#" class="text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-white px-4">Contact</a>
        </nav>
      </div>
    </div>
  </div>
</header>

Verwandte Komponenten

RetroHeaderComponent

Retro/Vintage-Header-Komponente mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

Header-Komponente

Eine responsive Header-Komponente, die im Brutalismus-Stil mit einem pastellfarbenen Farbschema für einen Blog oder eine Content-Site gestaltet wurde und Unterstützung für dunkle Themen bietet.

Offen

E-Commerce-Header-Komponente

Eine responsive E-Commerce-Header-Komponente, die mit Tailwind CSS nach Material Design-Prinzipien erstellt wurde. Verfügt über ein monochromatisches Farbschema (Blautöne), Suchfunktionen, ein Navigationsmenü, einen Warenkorb und ein Benutzerprofil. Der Header enthält Tiefeneffekte wie Schatten und unterstützt den Dunkelmodus. Die Komponente reagiert vollständig auf ein mobiles Hamburger-Menü.

Offen