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
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 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.
SkeuoHeaderComponent
Un composant d’en-tête réactif avec un design Skeuomorphism, la prise en charge du thème sombre et une barre de navigation.