Componente de encabezado Retro Vintage
Un componente de encabezado receptivo con un estilo de diseño retro / vintage, con soporte para el modo oscuro y una estética nostálgica inspirada en los años 80 y 90.
Código HTML
<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>Componentes relacionados
Neon_Glow_Header_Component
Un componente de encabezado receptivo para aplicaciones SaaS con efectos de neón/resplandor y un esquema de color dulce/dulce, con soporte para modo oscuro y elementos interactivos.
Componente de encabezado
Un componente de encabezado de diseño minimalista y plano para un portafolio, con un diseño responsivo con soporte para temas oscuros y múltiples elementos interactivos.
Componente de encabezado skeuomórfico
Un componente de encabezado simple y receptivo diseñado para sitios web de comercio electrónico con un estilo esqueuomórfico, que utiliza un esquema de color en escala de grises y admite el modo oscuro.