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 3D
Composant d’en-tête complexe et interactif conçu pour les interfaces de médias sociaux à l’aide d’un style 3D avec des couleurs en niveaux de gris. Il comprend un logo, une barre de recherche, des avatars d’utilisateurs et des boutons d’action, avec un comportement réactif et une prise en charge du mode sombre.
Composant d’en-tête de réseau social
Un composant d’en-tête complexe, réactif en mode sombre, au design minimaliste et aux couleurs complémentaires, conçu pour les interfaces de médias sociaux.
Composant d’en-tête
Un composant d’en-tête réactif conçu dans un style Brutalism avec une palette de couleurs pastel pour un blog ou un site de contenu, intégrant la prise en charge du thème sombre.