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
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.
Composant d’en-tête
Composant d’en-tête de style Neumorphism pour un portfolio avec un thème sombre, un design réactif et contenant plusieurs éléments interactifs.
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.