Sticky Navigation Component - Neumorphism
A responsive sticky navigation component with Neumorphism design, complementary color scheme, and dark theme support, suitable for a portfolio website. Uses Tailwind CSS with dark mode classes and includes subtle shadows for the Neumorphism effect.
HTML Code
<nav class="sticky top-0 z-10 bg-gray-200 dark:bg-gray-800 p-4 transition-all duration-300 ease-in-out shadow-neumorphism-light dark:shadow-neumorphism-dark">
<div class="container mx-auto flex justify-between items-center">
<div class="text-gray-800 dark:text-white text-lg font-bold">Your Logo</div>
<ul class="flex space-x-4">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Portfolio</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
</li>
</ul>
</div>
</nav>
<style>
.shadow-neumorphism-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphism-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #545454;
}
</style>Related Components
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.
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.
Sticky Navigation Component
A simple, clean, and high-contrast sticky navigation bar with a monospace/developer aesthetic, suitable for entertainment or media platforms.