Composant d’en-tête vintage rétro
Un composant d’en-tête réactif avec un style de design rétro/vintage, avec prise en charge du mode sombre et une esthétique nostalgique inspirée des années 80 et 90.
HTML Code
<header class="bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 p-6">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40/40?random=1" alt="Logo" class="rounded-full">
<h1 class="text-white text-3xl font-bold font-mono tracking-widest">Retro Header</h1>
</div>
<nav>
<ul class="flex space-x-6 text-white">
<li><a href="#" class="hover:text-pink-200 transition duration-300">Home</a></li>
<li><a href="#" class="hover:text-pink-200 transition duration-300">About</a></li>
<li><a href="#" class="hover:text-pink-200 transition duration-300">Gallery</a></li>
<li><a href="#" class="hover:text-pink-200 transition duration-300">Contact</a></li>
</ul>
</nav>
</div>
<div class="mt-4 text-center">
<img src="https://picsum.photos/800/200?random=1" alt="Header Image" class="rounded-lg shadow-lg mx-auto">
</div>
</header>
<style>
/* Dark Theme Support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a2e;
}
}
</style>Composants associés
Composant d’en-tête de commerce électronique
Un composant d’en-tête d’e-commerce réactif construit à l’aide de Tailwind CSS avec les principes de Material Design. Dispose d’une palette de couleurs monochromatiques (nuances de bleu), d’une fonctionnalité de recherche, d’un menu de navigation, d’un panier d’achat et d’un profil utilisateur. L’en-tête comprend des effets de profondeur tels que des ombres et prend en charge le mode sombre. Le composant est entièrement réactif avec un menu de hamburgers mobile.
Composant d’en-tête
Composant d’en-tête avec micro-interactions, schéma de couleurs complémentaires, complexité complexe, à des fins de tableau de bord, à l’aide de Tailwind CSS.
En-tête de conception 3D
Un composant d’en-tête réactif avec des éléments de conception 3D et la prise en charge du mode sombre.