Компонент навигации
Простой компонент навигации, разработанный для блога с микровзаимодействиями и пастельной цветовой гаммой. Он отличается адаптивным макетом и поддержкой темных тем.
HTML-код
<nav class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-all duration-300">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/30/30" alt="Logo" class="rounded-full">
<span class="text-xl font-semibold text-gray-800 dark:text-white">My Blog</span>
</div>
<ul class="flex space-x-6">
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Home</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">About</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Blog</a>
</li>
<li>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white transition-colors duration-300">Contact</a>
</li>
</ul>
</div>
</nav>Связанные компоненты
Ретро винтажный навигационный компонент
Навигационный компонент в стиле ретро/винтаж с однотонной цветовой гаммой приборной панели. Он включает в себя ссылки и поддерживает темный режим.
Компонент навигации по стекломорфизму
Компонент навигации в стиле glassmorphism для сайтов электронной коммерции с монохроматическими цветами, адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS.
Компонент навигации по дизайну материалов
Простой, отзывчивый навигационный компонент Material Design для интерфейсов социальных сетей с использованием цветовой схемы в оттенках серого. Имеет понятный макет с логотипом, навигационными ссылками, строкой поиска и аватаром пользователя. Включает поддержку темного режима с использованием префикса dark: от Tailwind.