Компонент «Липкая навигация»
Компонент липкой навигации в темном режиме для электронной коммерции, использующий дополнительную цветовую схему и базовую верстку.
HTML-код
<nav class="bg-gray-900 sticky top-0 shadow-lg">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0">
<img class="h-8" src="https://picsum.photos/50/50" alt="Logo">
</div>
<div class="hidden md:flex md:space-x-8 ml-10">
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Shop</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
<div class="flex items-center">
<button class="text-gray-300 hover:bg-gray-700 hover:text-white p-1 rounded-full">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Profile">
</button>
</div>
</div>
</div>
</nav>Связанные компоненты
Брутализм Липкая навигация
Сложный компонент Sticky Navigation с брутальным дизайном, монохроматической цветовой схемой, предназначенный для портфолио, с адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.
Компонент «Липкая навигация»
Компонент Sticky Navigation со стилем Glassmorphism, адаптивными эффектами и поддержкой темной темы с использованием Tailwind CSS.
Ретро Электронная Коммерция Липкая Навигация
Ретро/винтажный компонент липкой навигации для сайтов электронной коммерции с яркими цветами, сложными элементами, отзывчивостью и поддержкой темного режима с использованием Tailwind CSS.