Navigation Enhancement Components Component
A responsive navigation component with dark mode support for e-commerce websites. It features a triadic color scheme with a dark background to reduce eye strain.
HTML Code
<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>Related Components
Navigation Enhancement Component
A responsive navigation component designed in Material Design style using Tailwind CSS, featuring dark theme support and responsive effects.
Navigation Enhancement Components Component
A complex, brutalist-style navigation component for corporate websites with analogous color scheme, responsive design, and dark mode support. Features unusual layouts and high contrast.
Navigation Enhancement Components
A Retro/Vintage navigation bar with a complex design for professional websites, featuring triadic color scheme and responsive dark theme support.