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
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.
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.
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.