CCHub Logo CCHub Tailwind Collection
Komponenten Kopfball Material Design Business Header

Material Design Business Header

Material Design inspirierte eine einfache Header-Komponente mit komplementärem Farbschema für Unternehmenswebsites. Responsives Design mit Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<header class="bg-blue-500 text-white py-4 shadow-md dark:bg-gray-800">
  <div class="container mx-auto flex justify-between items-center">
    <div class="text-xl font-bold">Business Name</div>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Home</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">About</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Services</a></li>
        <li><a href="#" class="hover:text-blue-200 dark:hover:text-gray-400">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

Verwandte Komponenten

Komplexer Dashboard-Header

Eine komplexe, reaktionsschnelle Header-Komponente mit 3D-Designelementen, Erdton-Farbschema, die für Dashboards entwickelt wurde. Enthält Unterstützung für dunkle Themen mit Tailwind CSS und verwendet picsum.photos und randomuser.me für Demobilder/Avatare.

Offen

3D-Retro-Wetter-Header-Komponente

Eine komplexe Header-Komponente im Retro-Stil für eine Wetter-/Klimaanwendung mit 3D-Designelementen, einer gedämpften Farbpalette und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Es zeigt aktuelle Wetterinformationen, Standort, Datum und Navigation an.

Offen

DarkTriadicSimpleBusinessHeader

Responsive Header-Komponente mit Unterstützung des Dunkelmodus für Unternehmenswebsites

Offen