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
A responsive Navigation Bar Component designed in Material Design style with triadic color scheme, suitable for social media interfaces, and includes dark theme support.
Skeuomorphic Navigation Bar
A responsive navigation bar component designed in a skeuomorphic style with dark theme support using Tailwind CSS.
Skeuomorphic Navigation Bar
A portfolio navigation bar component designed with skeuomorphic styles and a pastel color scheme, including support for dark mode. It features interactive elements such as links and a dropdown menu.