CCHub Logo CCHub Tailwind Collection
Komponenten Kopfball Header-Komponente

Header-Komponente

Eine responsive Header-Komponente mit Unterstützung für den Dunkelmodus, mit einem Logo, Navigationslinks und einer Call-to-Action-Schaltfläche. Das Design verwendet einen dunklen Hintergrund, um die Belastung der Augen zu reduzieren.

Vorschau

HTML-Code 

<header class="bg-gray-900 text-gray-100">
  <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
    <a class="flex title-font font-medium items-center text-white mb-4 md:mb-0">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
        <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
      </svg>
      <span class="ml-3 text-xl">DarkMode Header</span>
    </a>
    <nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
      <a class="mr-5 hover:text-white">First Link</a>
      <a class="mr-5 hover:text-white">Second Link</a>
      <a class="mr-5 hover:text-white">Third Link</a>
      <a class="mr-5 hover:text-white">Fourth Link</a>
    </nav>
    <button class="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">Button
      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
        <path d="M5 12h14M12 5l7 7-7 7"></path>
      </svg>
    </button>
  </div>
</header>

Verwandte Komponenten

Header-Komponente

Eine reaktionsschnelle Header-Komponente mit Mikrointeraktionen mit kleinen, ansprechenden Animationen und Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Neon_Glow_Header_Component

Eine reaktionsschnelle Header-Komponente für SaaS-Anwendungen mit Neon-/Leuchteffekten und einem Bonbon-/Süßigkeiten-Farbschema mit Unterstützung für den Dunkelmodus und interaktiven Elementen.

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