Скевоморфная навигация
Простой, отзывчивый навигационный компонент со скевоморфным дизайном, аналогичной цветовой схемой, подходящей для приложений социальных сетей, с поддержкой темных тем.
HTML-код
<nav class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 shadow-lg">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="text-gray-800 dark:text-gray-200 font-bold text-xl">SocialApp</div>
<div class="flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Home
</div>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Profile
</div>
</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">
<div class="p-2 rounded-md bg-gray-300 dark:bg-gray-600 shadow-md hover:shadow-lg">
Messages
</div>
</a>
</div>
</div>
</nav>Связанные компоненты
Навигация по нейроморфизму
Простой адаптивный навигационный компонент со стилем Neumorphism для электронной коммерции.
Компонент навигации
Сложный компонент навигации, стилизованный под 3D-дизайн для блогов, с триадической цветовой схемой и адаптивной поддержкой темной темы.
Компонент скевоморфной навигации
Навигационный компонент, выполненный в скевоморфном стиле, с дополнительной цветовой схемой, подходит для приборной панели с визуализацией данных и панелями управления. Он включает в себя интерактивные элементы для вовлечения пользователя.