Скевоморфная панель навигации
Простая адаптивная панель навигации для социальных сетей со скевоморфным стилем дизайна, использующая аналогичную цветовую схему и поддерживающая темный режим.
HTML-код
<nav class="bg-gray-200 dark:bg-gray-800 p-4 shadow-lg rounded-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
<span class="text-xl font-semibold text-gray-800 dark:text-gray-200">SocialApp</span>
</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Home</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">About</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Contact</a></li>
<li><a href="#" class="text-gray-800 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 transition-colors">Profile</a></li>
</ul>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600">
</div>
</div>
</nav>Связанные компоненты
Ретро/винтажная панель навигации по социальным сетям
Ретро/винтажная навигационная панель для социальных сетей с аналогичной цветовой схемой, простой сложностью, адаптивностью и поддержкой темных тем.
Скевоморфная панель навигации
Компонент панели навигации портфолио, выполненный в скевоморфных стилях и пастельной цветовой гамме, включая поддержку темного режима. В нем есть интерактивные элементы, такие как ссылки и выпадающее меню.
Artsy_Neon_Crypto_Navbar
Сложная, отзывчивая навигационная панель для криптовалют/блокчейн-приложений с художественным дизайном, вдохновленным акварелью, и яркой неоновой цветовой гаммой. Включает поддержку темного режима и интерактивные элементы.