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 réactif avec un design rétro/vintage, avec un support de thème sombre et une esthétique nostalgique des années 80/90.
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 brutaliste
Un composant d’en-tête brut et audacieux conçu avec Tailwind CSS, avec un contraste élevé et des mises en page inhabituelles adaptées aux thèmes clairs et sombres.