Navigation Component
A simple navigation component designed for a blog with microinteractions and pastel color scheme. It features a responsive layout and dark theme support.
HTML Code
<nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
<span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
</div>
<ul class="flex space-x-6">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
</li>
</ul>
</div>
</nav>Related Components
E-commerce Material Design Navigation
A complex, responsive, monochromatic e-commerce navigation component inspired by Material Design, featuring search, cart, user profile, and category links with dark mode support.
Retro Navigation Bar
A responsive, high-contrast retro/vintage navigation bar suitable for food/restaurant websites, featuring 80s/90s aesthetics and dark mode support.
Gradient_Corporate_Blues_Navigation_Component
A complex, responsive navigation component designed for non-profit/charity websites, featuring gradient corporate blue tones, smooth transitions, and dark mode support. Includes a logo, navigation links, a call-to-action button, and a mobile menu.