Componente de navegación retro vintage
Un componente de navegación con un diseño retro/vintage con una combinación de colores monocromática para un salpicadero. Incluye enlaces y admite el modo oscuro.
Código HTML
<nav class="bg-gray-800 p-4 shadow-md">
<div class="flex justify-between items-center">
<div class="text-white text-lg font-bold">Retro Dashboard</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white">Home</a>
<a href="#" class="text-gray-300 hover:text-white">Data</a>
<a href="#" class="text-gray-300 hover:text-white">Settings</a>
<a href="#" class="text-gray-300 hover:text-white">Profile</a>
</div>
<div class="md:hidden">
<button class="text-gray-300 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<div class="mt-4 md:hidden">
<a href="#" class="block text-gray-300 hover:text-white">Home</a>
<a href="#" class="block text-gray-300 hover:text-white">Data</a>
<a href="#" class="block text-gray-300 hover:text-white">Settings</a>
<a href="#" class="block text-gray-300 hover:text-white">Profile</a>
</div>
</nav>
<div class="p-4">
<h2 class="text-white text-2xl mb-4">Dashboard Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-700 p-4 rounded-md shadow-md">
<img src="https://picsum.photos/400/300?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md">
<h3 class="text-white mt-2">Data Point 1</h3>
<p class="text-gray-300">Description of data point 1.</p>
</div>
<div class="bg-gray-700 p-4 rounded-md shadow-md">
<img src="https://picsum.photos/400/300?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md">
<h3 class="text-white mt-2">Data Point 2</h3>
<p class="text-gray-300">Description of data point 2.</p>
</div>
<div class="bg-gray-700 p-4 rounded-md shadow-md">
<img src="https://picsum.photos/400/300?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md">
<h3 class="text-white mt-2">Data Point 3</h3>
<p class="text-gray-300">Description of data point 3.</p>
</div>
</div>
</div>Componentes relacionados
Componente de navegación de Glassmorphism
Un componente de navegación de estilo glassmorphism para sitios de comercio electrónico, con colores monocromáticos, diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Componente de navegación skeuomórfica
Un componente de navegación esqueuomórfico diseñado para imitar elementos del mundo real, como un panel de control físico o un panel de control. Cuenta con un diseño responsivo, efectos de desplazamiento que simulan pulsaciones de botones físicos y compatibilidad con temas oscuros. La navegación incluye sombras, degradados y texturas sutiles para crear una apariencia táctil en 3D que recuerda a las interfaces físicas.
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.