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

Header-Komponente

Rückenwind-Header-Komponente mit 3D-Design, Pastell-Farbschema, komplexer Komplexität, Dashboard-Zweck, responsivem Design und Unterstützung für dunkle Themen

Offen

Header-Komponente

Eine einfache Header-Komponente, die im Neumorphism-Stil mit leuchtenden Farben entworfen wurde und sich perfekt für einen Blog/eine Content-Webseite eignet. Es bietet Unterstützung für den Dunkelmodus für responsives Design.

Offen

Header-Komponente

Eine minimalistische, flache Design-Header-Komponente für ein Portfolio mit einem responsiven Design mit Unterstützung für dunkle Themen und mehreren interaktiven Elementen.

Offen