RetroHeaderComponent
Componente de encabezado retro / vintage con efectos receptivos y soporte para temas oscuros.
Código HTML
<header class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="text-2xl font-bold">RetroHeader</div>
<nav class="hidden md:flex space-x-4">
<a href="#" class="hover:underline">Home</a>
<a href="#" class="hover:underline">About</a>
<a href="#" class="hover:underline">Contact</a>
</nav>
<div class="md:hidden">
<button class="text-gray-800 dark:text-white 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 12h16M4 18h16"></path></svg>
</button>
</div>
</div>
</header>
Componentes relacionados
SkeuoHeaderComponent
Un componente de encabezado responsivo con diseño de Skeuomorphism, compatibilidad con temas oscuros y una barra de navegación.
Encabezado de negocio de diseño de materiales
Material Design inspiró un componente de encabezado simple con un esquema de color complementario para sitios web comerciales. Diseño responsivo con soporte para temas oscuros.
Componente de encabezado de Cyberpunk
Un componente de encabezado futurista con temática Cyberpunk para documentación o sitios wiki. Cuenta con un fondo oscuro con vibrantes acentos de neón (azul eléctrico, rosa intenso, verde lima), navegación receptiva y compatibilidad con el modo oscuro.