Компонент ретро-навигации
Навигационный компонент в стиле ретро с винтажной эстетикой 80-х/90-х годов, отличающийся адаптивным дизайном и поддержкой темных тем с использованием Tailwind CSS.
HTML-код
<nav class="bg-white dark:bg-gray-800 shadow-lg p-6 rounded-lg">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-xl font-bold text-gray-800 dark:text-white">Retro Nav</span>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">About</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Services</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-500 transition duration-300">Contact</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-800 dark:text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/>
</svg>
</button>
</div>
</div>
<div class="mt-4 md:hidden">
<div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg">
<a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Home</a>
<a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">About</a>
<a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Services</a>
<a href="#" class="block text-gray-800 dark:text-white hover:text-blue-500 transition duration-300 py-2">Contact</a>
</div>
</div>
</nav>
Связанные компоненты
Компонент навигации
Адаптивный компонент навигации в темном режиме, разработанный для электронной коммерции с пастельной цветовой гаммой и простой версткой.
Компонент адаптивной навигации
Компонент адаптивной навигации с микровзаимодействиями, цветовой схемой в оттенках серого и простой сложностью.
Компонент скевоморфной навигации
Навигационный компонент, выполненный в скевоморфном стиле, с яркими цветами и адаптивным макетом, подходящим для контента блога. Он включает в себя интерактивные функции, такие как эффекты наведения, и оптимизирован для темного режима.