粘滞导航组件
一个粘性导航组件，具有 Neumorphism 设计、互补配色方案、适度复杂性和对仪表板的响应式深色主题支持。该设计为 Neumorphism 效果加入了柔和的阴影，并使用互补色来创建视觉上吸引人的界面。它适用于提供数据可视化和控制面板的仪表板。
HTML 代码
<nav class="dark:bg-gray-800 dark:text-gray-200 bg-gray-200 text-gray-800 p-4 sticky top-0 z-50 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="container mx-auto flex items-center justify-between">
<div class="text-2xl font-semibold">Dashboard</div>
<ul class="flex space-x-6">
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Overview</a></li>
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Analytics</a></li>
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Reports</a></li>
<li><a href="#" class="hover:text-purple-600 dark:hover:text-purple-300 transition duration-300">Settings</a></li>
</ul>
<div class="flex items-center space-x-4">
<img class="w-8 h-8 rounded-full"
src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<button class="dark:text-gray-200 text-gray-800 focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h1M3 12H2m8.003-9.127a9.006 9.006 0 00-7.872 7.872m15.744 0A9.006 9.006 0 0112 21.003m-4.127-8.003a9.006 9.006 0 017.872-7.872m0 15.744a9.006 9.006 0 00-7.872-7.872"></path>
</svg>
</button>
</div>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #323232;
}
</style>
</nav>