Composant d’en-tête
Un composant d’en-tête réactif pour un tableau de bord avec des micro-interactions et des couleurs vives, prenant en charge le thème sombre.
HTML Code
<header class="bg-blue-600 dark:bg-gray-800 p-4 flex justify-between items-center transition-all duration-300">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full h-10 w-10 hover:scale-110 transition-transform duration-300">
<h1 class="text-white text-xl font-bold hover:text-blue-300 transition-colors duration-300">Dashboard</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Home</a>
<a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Reports</a>
<a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Settings</a>
</nav>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 border-2 border-white hover:border-blue-300 transition-all duration-300">
<button class="bg-blue-700 dark:bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition-colors duration-300">Logout</button>
</div>
</header>Composants associés
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.
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.
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.