Composant d’en-tête vintage rétro
Un composant d’en-tête réactif avec un style rétro/vintage adapté à un tableau de bord avec prise en charge du thème sombre.
HTML Code
<header class="bg-gradient-to-r from-purple-700 via-pink-500 to-yellow-500 dark:bg-gradient-to-r dark:from-purple-900 dark:via-pink-700 dark:to-yellow-700 p-5">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-3">
<h1 class="text-white text-3xl font-bold">My Dashboard</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Home</a>
<a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Reports</a>
<a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Settings</a>
</nav>
</div>
<div class="mt-4">
<input type="text" placeholder="Search..." class="p-2 rounded-md bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full max-w-md">
</div>
<div class="mt-4 flex items-center space-x-3">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-8 w-8">
<span class="ml-2 text-white">John Doe</span>
</div>
<button class="bg-yellow-500 text-white px-4 py-2 rounded-md hover:bg-yellow-400 transition duration-300">Logout</button>
</div>
</header>Composants associés
En-tête d’entreprise de conception matérielle
Material Design a inspiré un composant d’en-tête simple avec une palette de couleurs complémentaire pour les sites Web d’entreprise. Conception réactive avec prise en charge du thème 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.
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.