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.
HTML Code
<header class="bg-gray-800 text-white p-5 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h1 class="ml-3 text-lg font-bold">Retro Header</h1>
</div>
<nav class="hidden md:flex space-x-4">
<a href="#" class="text-lg hover:text-gray-400">Home</a>
<a href="#" class="text-lg hover:text-gray-400">About</a>
<a href="#" class="text-lg hover:text-gray-400">Services</a>
<a href="#" class="text-lg hover:text-gray-400">Contact</a>
</nav>
<button class="md:hidden focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<div class="mt-4 text-center">
<img class="mx-auto rounded-lg shadow-lg" src="https://picsum.photos/400/200?random=1" alt="Random Placeholder">
<p class="mt-2 text-sm text-gray-400">A touch of nostalgia from the 80s/90s.</p>
</div>
</header>
<style>
@media (prefers-color-scheme: dark) {
header {
background-color: #1c1c1c;
}
a {
color: #cbd5e1;
}
a:hover {
color: #f3f4f6;
}
}
</style>Composants associés
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.
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.
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.