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
Retro E-commerce Sticky Navigation
A retro/vintage sticky navigation component for e-commerce sites with vibrant colors, complex elements, responsiveness, and dark mode support using Tailwind CSS.
Sticky Navigation (Glassmorphism)
Sticky Navigation Component with Glassmorphism style, responsive, and dark theme support.
Sticky Navigation Component
A sticky navigation component designed in a skeuomorphic style, suitable for e-commerce websites with a responsive design and dark theme support using Tailwind CSS.