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
Paper/Print-inspired Government Navigation
A complex, paper/print-inspired navigation component for government/public websites, featuring sepia/brown tones, responsiveness, and dark mode support. It includes primary navigation, search, and a 'quick links' or 'services' section.
Navigation Enhancement Component
A glassmorphism-inspired navigation component designed for showcasing portfolio work and products with earth tones and dark mode support. The component features a frosted glass effect, responsive design, and minimal elements.
Navigation Enhancement Components
A responsive navigation enhancement component for a blog in dark mode style with vibrant colors and moderate complexity features.