Скевоморфная навигация
Простой, отзывчивый навигационный компонент со скевоморфным дизайном, аналогичной цветовой схемой, подходящей для приложений социальных сетей, с поддержкой темных тем.
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>Связанные компоненты
Минималистичный компонент навигации по земляным тонам
Минималистичный, плоский навигационный компонент с цветовой гаммой землистых тонов, подходящий для веб-сайтов консалтинга/услуг. Он включает в себя адаптивный дизайн для настольных компьютеров, планшетов и мобильных устройств, а также поддерживает темный режим.
Игривый компонент криптонавигации в оттенках серого
Игривый и дружелюбный компонент навигации в оттенках серого для криптовалют и блокчейн-приложений, отличающийся округлыми элементами, интерактивными состояниями, полной отзывчивостью и поддержкой темного режима.
Компоненты навигации
Адаптивная навигационная составляющая в соответствии с принципами Material Design с триадической цветовой схемой, ориентированная на интерфейсы социальных сетей, с поддержкой темного режима.