Navigation Component
A responsive dark mode navigation component designed for e-commerce with a pastel color scheme and simple layout.
HTML Code
<nav class="bg-gray-800 dark:bg-gray-900 p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
</div>
</div>
</nav>Related Components
Minimalist Jewel-Tone Food/Restaurant Navigation
A minimalist and responsive navigation component for food and restaurant websites, featuring jewel tones, dark mode support, and a clean flat design. Includes a logo, navigation links, and a call-to-action button, with a mobile-friendly hamburger menu.
Bauhaus Weather Nav
A responsive navigation component for a weather and climate application, featuring a Bauhaus-inspired design with geometric forms, muted colors, and full dark mode support.
3D_Earth_Tone_Dating_Social_Navigation
A responsive navigation component for dating/social platforms, featuring a 3D-inspired design with earth tones and dark mode support. Includes interactive elements like a profile avatar, search, and core navigation links.