Компонент навигации
Адаптивный компонент навигации в темном режиме, разработанный для электронной коммерции с пастельной цветовой гаммой и простой версткой.
HTML-код
<nav class="bg-gray-800 dark:bg-gray-900 p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Home</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Shop</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">About Us</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Contact</a>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</a>
<a href="#" class="text-pink-300 hover:text-pink-400 dark:text-pink-200 dark:hover:text-pink-300">Cart</a>
</div>
</div>
</nav>Связанные компоненты
Компонент скевоморфной навигации
Скевоморфный компонент навигации, разработанный для имитации реальных элементов, таких как физическая панель управления или приборная панель. Отличается адаптивным дизайном, эффектами наведения, имитирующими нажатие физических кнопок, и поддержкой темных тем. Навигация включает в себя тонкие тени, градиенты и текстуры для создания 3D-тактильного вида, напоминающего физические интерфейсы.
Ретро винтажный навигационный компонент
Навигационный компонент в стиле ретро/винтаж с однотонной цветовой гаммой приборной панели. Он включает в себя ссылки и поддерживает темный режим.
Компонент навигации по дизайну материалов
Простой, отзывчивый навигационный компонент Material Design для интерфейсов социальных сетей с использованием цветовой схемы в оттенках серого. Имеет понятный макет с логотипом, навигационными ссылками, строкой поиска и аватаром пользователя. Включает поддержку темного режима с использованием префикса dark: от Tailwind.