Composant d’en-tête
Un composant d’en-tête réactif avec prise en charge du mode sombre, avec un logo, des liens de navigation et un bouton d’appel à l’action. La conception utilise un fond sombre pour réduire la fatigue oculaire.
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>Composants associés
Composant d’en-tête
Un composant d’en-tête réactif pour une plate-forme musicale/audio, doté d’une esthétique de conception monospace/développeur avec des tons de terre et la prise en charge du mode sombre.
Composant d’en-tête
Un composant d’en-tête simple et réactif pour les réseaux sociaux, avec prise en charge du mode sombre. Il comporte un logo, une barre de recherche et un avatar de l’utilisateur. Utilise un jeu de couleurs en niveaux de gris.
Skeuomorphism Triadic Simple Portfolio Header Component
Skeuomorphism Triadic Simple Portfolio Header Component