Компонент липкой навигации - Нейроморфизм
Адаптивный компонент липкой навигации с дизайном Neumorphism, дополнительной цветовой схемой и поддержкой темных тем, подходящий для веб-сайта-портфолио. Использует Tailwind CSS с темными классами режима и включает тонкие тени для эффекта Неоморфизма.
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>Связанные компоненты
Компонент «Липкая навигация»
Сложный, отзывчивый компонент липкой навигации с эстетикой 3D-дизайна и лесной/зеленой цветовой палитрой, подходящий для приложений в здравоохранении и медицине. Включает поддержку темного режима и интерактивные элементы.
Компонент «Липкая навигация»
Простая, отзывчивая и закрепленная панель навигации, подходящая для маркетплейса, с аналогичной цветовой схемой и поддержкой темного режима. Включает тонкие микровзаимодействия при наведении.
Компонент «Липкая навигация»
Сложная, скевоморфная липкая навигационная панель с яркими цветами, разработанная для интерфейсов социальных сетей. Включает адаптивный дизайн и поддержку темного режима с использованием Tailwind CSS. Содержит изображение профиля, строку поиска, уведомления и значки сообщений.