粘性导航组件 - 瘦身风格
一个响应式粘性导航组件，采用Neumorphism设计，互补色彩方案和深色主题支持，适合个人作品网站。使用Tailwind CSS并结合深色模式类，并包括细微的阴影以达到Neumorphism效果。
HTML 代码
<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>