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
Encabezado de diseño 3D
Un componente de encabezado receptivo con elementos de diseño 3D y compatibilidad con el modo oscuro.
Componente de encabezado
Un componente de encabezado simple y receptivo para redes sociales, con soporte para modo oscuro. Cuenta con un logotipo, una barra de búsqueda y un avatar de usuario. Utiliza un esquema de color en escala de grises.
Componente de encabezado
Un componente de encabezado receptivo con soporte para modo oscuro, con un logotipo, enlaces de navegación y un botón de llamada a la acción. El diseño utiliza un fondo oscuro para reducir la fatiga visual.