Navigation Component
A responsive navigation component designed with Microinteractions and featuring engaging animations based on user actions, supporting both light and dark themes. The component includes profile avatar, navigation links, and hover effects.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-md p-4 rounded-md flex justify-between items-center transition-all duration-300">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40" alt="User Avatar" class="rounded-full transition-transform transform hover:scale-110 duration-300">
<h1 class="text-lg font-semibold text-gray-800 dark:text-gray-200">My Website</h1>
</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">About</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 p-2 rounded-md">Contact</a>
</div>
</nav>
Related Components
Brutalist Navigation Component
A brutalist navigation component with responsive behavior and dark theme support.
Neon Glow Government Navigation
A responsive navigation component for government/public services with a neon glow, candy-sweet color scheme, and dark mode support. Features bright, glowing elements with vibrant lighting effects.
Brutalist Social Navigation
A simple, brutalist navigation component for social media with complementary colors. Includes responsive design and dark mode support.