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.
HTML Code
<header class="bg-gray-900 text-gray-200 py-4 px-6 shadow-md">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="text-xl font-bold">SocialNet</div>
<div class="flex-grow mx-4 max-w-md">
<input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-800 text-gray-200 rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:focus:border-blue-600">
</div>
<nav>
<a href="#" class="px-3 py-2 hover:text-blue-400 dark:hover:text-blue-500">Profile</a>
</nav>
</div>
</header>Composants associés
En-tête de tableau de bord complexe
Un composant d’en-tête complexe et réactif avec des éléments de conception 3D, une palette de couleurs de terre, conçu pour les tableaux de bord. Inclut la prise en charge du thème sombre à l’aide de Tailwind CSS et utilise picsum.photos et randomuser.me pour les images de démonstration/avatars.
Composant d’en-tête
Un composant d’en-tête complexe et réactif pour une place de marché multi-fournisseurs, inspiré de l’esthétique du papier/de l’impression avec une palette de couleurs aux tons de bijou. Comprend la recherche, la navigation, le profil de l’utilisateur et le panier.
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.