Componente de mejora de la navegación
Un componente de navegación responsivo diseñado para el modo oscuro con Tailwind CSS, con marcadores de posición para logotipos, imágenes y avatares.
Código HTML
<nav class="bg-gray-900 text-white p-4 shadow-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="mr-3 rounded-full">
<span class="text-xl font-bold">MyApp</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-gray-300">Home</a>
<a href="#" class="hover:text-gray-300">About</a>
<a href="#" class="hover:text-gray-300">Services</a>
<a href="#" class="hover:text-gray-300">Contact</a>
</div>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border border-gray-700">
<button class="ml-4 p-2 bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Menu</button>
</div>
</div>
</nav>
<div class="bg-gray-800 text-white p-4">
<div class="container mx-auto flex flex-col md:flex-row md:justify-between">
<div class="flex items-center mb-4 md:mb-0">
<img src="https://picsum.photos/100/100" alt="Placeholder Image" class="rounded-lg">
<p class="ml-4">This is a simple navigation enhancement component in dark mode.</p>
</div>
<div class="flex space-x-4">
<a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 1</a>
<a href="#" class="bg-gray-700 px-4 py-2 rounded hover:bg-gray-600">Action 2</a>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #fff;
}
}
</style>Componentes relacionados
Componentes de mejora de la navegación
Un componente de navegación responsivo diseñado con conceptos de Material Design utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición.
Navegación inspirada en papel/impresión para plataformas de entretenimiento
Un componente de navegación simple y receptivo para plataformas de entretenimiento, que imita un estilo de papel/impresión con una paleta de colores verde bosque. Incluye soporte para el modo oscuro y utiliza HTML semántico.
Comercio electrónico Navegación industrial
Un complejo componente de navegación de comercio electrónico de estilo industrial con materiales en bruto y elementos expuestos estéticos. Cuenta con un esquema monocromático en blanco y negro con un acento brillante, totalmente receptivo con soporte para modo oscuro.