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