Skeuomorphic Navigation Bar
A simple responsive navigation bar for social media with a skeuomorphic design style, utilizing an analogous color scheme and supporting dark mode.
HTML Code
<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
<span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
</ul>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
</div>
</div>
</nav>Related Components
Navigation Bar Component 47
A responsive navigation bar with a 3D design style, incorporating depth and engagement, supporting dark theme.
Navigation Bar Component
A simple responsive navigation bar component designed for a dashboard, featuring a monochromatic color scheme and microinteractions. It includes a dark mode support with hover effects for engaging animations.
Skeuomorphic Navigation Bar
A responsive navigation bar component designed in a skeuomorphic style with dark theme support using Tailwind CSS.