Sticky Navigation Component
A complex, skeuomorphic sticky navigation bar with vibrant colors, designed for social media interfaces. Includes responsive design and dark mode support using Tailwind CSS. Features profile image, search bar, notifications, and messaging icons.
HTML Code
<nav class="sticky top-0 bg-gradient-to-b from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900 p-4 shadow-lg z-50">
<div class="container mx-auto flex items-center justify-between">
<!-- Profile Pic and Site Title -->
<div class="flex items-center">
<img class="h-10 w-10 rounded-full border-2 border-white mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile Picture">
<span class="text-white text-2xl font-bold drop-shadow-md">SocialNet</span>
</div>
<!-- Search Bar -->
<div class="flex-grow mx-5">
<input type="text" placeholder="Search..." class="w-full px-4 py-2 rounded-full bg-white bg-opacity-30 text-white placeholder-white::placeholder focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50 dark:bg-gray-700 dark:bg-opacity-50 dark:placeholder-gray-300">
</div>
<!-- Icons -->
<div class="flex items-center space-x-6">
<a href="#" class="text-white hover:scale-110 transition-transform duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
</a>
<a href="#" class="text-white hover:scale-110 transition-transform duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-.55.55c-.18.18-.42.29-.67.29H9v-.54l-.55-.55z"/>
</svg>
</a>
</div>
</div>
</nav>Related Components
Sticky Navigation Component
A responsive sticky navigation bar that follows Material Design guidelines, featuring a dark mode.
Sticky Navigation Component
A dark mode sticky navigation component for e-commerce, using a complementary color scheme and basic layout.
Sticky Navigation Component
Minimalist, responsive sticky navigation bar for a weather/climate website, featuring cool neutral colors, dark mode support, and interactive elements. Designed for medium complexity with functional links and a search bar.