CCHub Logo CCHub Tailwind Collection
Komponenten Kopfball SocialMediaHeader

SocialMediaHeader

Eine reaktionsschnelle Header-Komponente für Social-Media-Schnittstellen, die mit einer Benutzeroberfläche im Dunkelmodus unter Verwendung eines triadischen Farbschemas und minimaler Elemente entworfen wurde. Es enthält einen Website-Titel, eine Suchleiste und einen Link zum Benutzerprofil mit Stilen, die für den Dunkelmodus mit Tailwind CSS angepasst sind.

Vorschau

HTML-Code 

<header class="bg-gray-900 text-gray-200 py-4 px-6 shadow-md">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <div class="text-xl font-bold">SocialNet</div>
    <div class="flex-grow mx-4 max-w-md">
      <input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-800 text-gray-200 rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:focus:border-blue-600">
    </div>
    <nav>
      <a href="#" class="px-3 py-2 hover:text-blue-400 dark:hover:text-blue-500">Profile</a>
    </nav>
  </div>
</header>

Verwandte Komponenten

Brutalistische Header-Komponente

Eine rohe und fette Header-Komponente, die mit Tailwind CSS entworfen wurde und sich durch hohen Kontrast und ungewöhnliche Layouts auszeichnet, die sowohl für helle als auch für dunkle Themen geeignet sind.

Offen

Social-Media-Header-Komponente

Eine komplexe, reaktionsschnelle Header-Komponente im Dunkelmodus mit minimalistischem Design und komplementärem Farbschema, die für Social-Media-Schnittstellen entwickelt wurde.

Offen

Header-Komponente

Eine einfache, reaktionsschnelle Header-Komponente für einen Blog oder eine Content-Site mit monochromatischem Styling und Unterstützung für den Dunkelmodus, die sich auf subtile Mikrointeraktionen konzentriert, wenn der Mauszeiger über Navigationslinks bewegt wird.

Offen