Componente Componentes de mejora de navegación
Un componente de navegación responsivo con soporte de modo oscuro para sitios web de comercio electrónico. Cuenta con un esquema de color triádico con un fondo oscuro para reducir la fatiga visual.
Código HTML
<nav class="bg-gray-900 dark:bg-purple-900 p-4">
<div class="container mx-auto flex items-center justify-between">
<a href="#" class="text-white text-lg font-semibold">E-Shop</a>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-300 hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Products</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Categories</a></li>
<li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li>
</ul>
<div class="flex items-center space-x-4">
<input type="text" placeholder="Search..." class="bg-gray-800 text-white px-3 py-1 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
<button class="bg-blue-600 dark:bg-green-600 text-white px-4 py-1 rounded-md">Cart</button>
</div>
</div>
</nav>Componentes relacionados
Componentes de mejora de la navegación
Una barra de navegación Retro/Vintage con un diseño complejo para sitios web profesionales, con una combinación de colores triádica y compatibilidad con temas oscuros receptivos.
Componentes de mejora de la navegación
Un componente de navegación diseñado en 3D con un esquema de color análogo, complejidad moderada, adecuado para la visualización de datos del tablero y los paneles de control.
Componentes de mejora de la navegación
Un componente de navegación diseñado con una estética brutalista, con diseños atrevidos, alto contraste y diseños inusuales. Incluye efectos responsivos y admite temas oscuros con CSS.