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.
HTML Code
<header class="bg-white dark:bg-gray-900 p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<!-- Logo or Site Title -->
<a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">SocialSite</a>
<!-- Search Bar -->
<div class="flex-grow mx-4 max-w-xl">
<input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
</div>
<!-- User Avatar/Menu -->
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
</div>
</div>
</header>Composants associés
Composant d’en-tête
Un composant d’en-tête réactif doté d’un design Glassmorphism avec des éléments translucides givrés ressemblant à du verre et une prise en charge du thème sombre.
Composant d’en-tête de commerce électronique
Un composant d’en-tête réactif, dynamique, inspiré du Material Design pour les sites Web de commerce électronique, avec la navigation, la recherche et les actions de l’utilisateur. Prend en charge le mode sombre.
En-tête SocialMediaScreen
Un composant d’en-tête réactif pour les interfaces de médias sociaux, conçu avec une interface utilisateur en mode sombre utilisant un schéma de couleurs triadique et des éléments minimaux. Il comprend un titre de site, une barre de recherche et un lien vers le profil de l’utilisateur, avec des styles adaptés au mode sombre à l’aide de Tailwind CSS.