Componente de navegación
Un componente de navegación de inspiración retro/vintage diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros.
Código HTML
<nav class="bg-gray-800 text-white py-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-xl font-bold hover:text-gray-400 transition duration-300">RetroNav</a>
<ul class="hidden md:flex space-x-4">
<li><a href="#" class="hover:text-gray-400 transition duration-300">Home</a></li>
<li><a href="#" class="hover:text-gray-400 transition duration-300">About</a></li>
<li><a href="#" class="hover:text-gray-400 transition duration-300">Services</a></li>
<li><a href="#" class="hover:text-gray-400 transition duration-300">Contact</a></li>
</ul>
</div>
<div class="md:hidden">
<button class="text-gray-400 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" />
</svg>
</button>
</div>
</div>
</nav>
<div class="bg-gray-900 text-white p-8 flex flex-col items-center">
<h1 class="text-3xl font-bold mb-4">Welcome to RetroNav</h1>
<p class="mb-4">Experience the nostalgia of the 80s and 90s with our vintage-inspired designs.</p>
<img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-4 rounded-lg shadow-md">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600">
<span class="font-semibold">User Name</span>
</div>
</div>
<style>
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: white;
}
nav {
background-color: #2c2c2c;
}
}
</style>Componentes relacionados
Navegación sanitaria monoespacial
Un componente de navegación complejo y sensible para aplicaciones médicas/de atención médica, con un diseño monoespaciado/inspirado en desarrolladores con neutros cálidos, compatibilidad con modo oscuro y elementos interactivos.
Componente de navegación de Material Design
Un componente de navegación de Material Design simple y receptivo para interfaces de redes sociales que utiliza un esquema de color en escala de grises. Presenta un diseño limpio con logotipo, enlaces de navegación, barra de búsqueda y avatar de usuario. Incluye soporte para el modo oscuro usando el prefijo dark: de Tailwind.
E-commerce Material Design Navegación
Un componente de navegación de comercio electrónico complejo, receptivo y monocromático inspirado en Material Design, con enlaces de búsqueda, carrito, perfil de usuario y categoría con soporte para modo oscuro.