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 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.
Neon_Glow_Header_Component
Un composant d’en-tête réactif pour les applications SaaS avec des effets de néon/lueur et une palette de couleurs bonbon/doux, avec prise en charge du mode sombre et des éléments interactifs.
Composant d’en-tête
Composant d’en-tête simple et réactif pour un blog ou un site de contenu avec un style monochromatique et une prise en charge du mode sombre, en se concentrant sur des micro-interactions subtiles lors du survol des liens de navigation.