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 météo rétro 3D
Un composant d’en-tête complexe à thème rétro pour une application météo/climat, avec des éléments de conception 3D, une palette de couleurs sourdes et une réactivité totale avec prise en charge du mode sombre. Il affiche les informations météorologiques actuelles, l’emplacement, la date et la navigation.
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 avec un design rétro/vintage, avec un support de thème sombre et une esthétique nostalgique des années 80/90.