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.
HTML-Code
<header class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="rounded-full shadow-md" />
<h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-2">My Blog</h1>
</div>
<nav class="flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Contact</a>
</nav>
</header>Verwandte Komponenten
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.
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.
Cyberpunk-Header-Komponente
Eine futuristische Cyberpunk-Header-Komponente für Dokumentations- oder Wiki-Seiten. Verfügt über einen dunklen Hintergrund mit leuchtenden Neon-Akzenten (Electric Blue, Hot Pink, Limettengrün), reaktionsschnelle Navigation und Unterstützung für den Dunkelmodus.