Componente de navegación
Un componente de navegación responsivo diseñado para el modo oscuro con Tailwind CSS.
Código HTML
<nav class="bg-gray-900 text-white p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-lg font-semibold">Brand</a>
<a href="#" class="hidden md:block">Home</a>
<a href="#" class="hidden md:block">About</a>
<a href="#" class="hidden md:block">Services</a>
<a href="#" class="hidden md:block">Contact</a>
</div>
<div class="flex items-center space-x-4">
<input type="text" placeholder="Search..." class="bg-gray-800 text-white p-2 rounded-md" />
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"/>
</div>
</div>
</nav>
<main class="bg-gray-800 min-h-screen p-4">
<h1 class="text-3xl mb-4">Welcome to Our Website</h1>
<img src="https://picsum.photos/800/300" alt="Placeholder" class="w-full rounded-lg mb-4" />
<p class="text-gray-300">This is a simple layout demo for the Navigation Component.</p>
</main>
<footer class="bg-gray-900 text-white p-4">
<div class="container mx-auto text-center">
<p>© 2023 Navigation Component. All rights reserved.</p>
</div>
</footer>Componentes relacionados
Navegación del panel de control (Material Design)
Componente de navegación del tablero de Material Design con esquema de color triádico y soporte de modo oscuro.
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.
Barra de navegación de degradado vidrioso
Esta barra de navegación presenta un moderno diseño acristalado, que combina colores degradados y un efecto de vidrio esmerilado para mantener un efecto translúcido mientras se desplaza.