Composant d’en-tête
Un composant d’en-tête minimaliste et plat pour un portfolio, avec un design réactif avec prise en charge du thème sombre et plusieurs éléments interactifs.
HTML Code
<header class="bg-white dark:bg-gray-800 shadow-md">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
<h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">My Portfolio</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
</nav>
<div class="relative md:hidden">
<button class="text-gray-600 dark:text-gray-300 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
</div>
</header>
<div class="block md:hidden bg-gray-100 dark:bg-gray-700">
<div class="container mx-auto px-4 py-2">
<div class="flex flex-col space-y-2">
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Home</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">About</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Projects</a>
<a href="#" class="block text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">Contact</a>
</div>
</div>
</div>Composants associés
Composant d’en-tête météo rétro 3D
Un composant d’en-tête complexe à thème rétro pour une application météo/climat, avec des éléments de conception 3D, une palette de couleurs sourdes et une réactivité totale avec prise en charge du mode sombre. Il affiche les informations météorologiques actuelles, l’emplacement, la date et la navigation.
Composant d’en-tête
Composant d’en-tête avec micro-interactions, schéma de couleurs complémentaires, complexité complexe, à des fins de tableau de bord, à l’aide de Tailwind CSS.
Composant d’en-tête
Un composant d’en-tête réactif avec des micro-interactions avec de petites animations attrayantes et la prise en charge du thème sombre à l’aide de Tailwind CSS.