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
RetroNav
A simple, responsive, and dark-mode compatible navigation component with a retro/vintage design, vibrant color scheme, and minimal elements, suitable for e-commerce websites.
Navigation Component
A responsive navigation component designed for a portfolio, featuring microinteractions and dark theme support.