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