Skeuomorphic Navigation
A simple, responsive navigation component with Skeuomorphic design, analogous color scheme suitable for social media applications, with dark theme support.
HTML Code
<nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Home
</div>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Profile
</div>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Messages
</div>
</a>
</div>
</div>
</nav>Related Components
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.
Skeuomorphic Navigation Component
A navigation component designed with skeuomorphic style, featuring a complementary color scheme, suitable for a dashboard with data visualization and control panels. It includes interactive elements for user engagement.
Cyberpunk_Food_Nav
A simple, responsive cyberpunk-themed navigation component for food/restaurant websites, featuring dark backgrounds, neon accents, and dark mode support.