Компонент компонентов навигации
Адаптивный компонент навигации с поддержкой темного режима с использованием Tailwind CSS. Он включает в себя логотип, навигационные ссылки и кнопку призыва к действию.
HTML-код
<nav class="bg-gray-900 text-white">
<div class="container mx-auto px-6 py-4">
<div class="flex justify-between items-center">
<div class="flex items-center">
<svg class="w-8 h-8 fill-current text-white mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path></svg>
<span class="text-xl font-bold">MyCompany</span>
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="hover:text-purple-400">Home</a>
<a href="#" class="hover:text-purple-400">About</a>
<a href="#" class="hover:text-purple-400">Services</a>
<a href="#" class="hover:text-purple-400">Contact</a>
</div>
<div class="hidden md:block">
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-full">Get Started</button>
</div>
<div class="md:hidden">
<button class="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"></path></svg>
</button>
</div>
</div>
</div>
</nav>Связанные компоненты
Компоненты навигации
Навигационный компонент, выполненный в бруталистском стиле, с пастельной цветовой гаммой для интерфейсов социальных сетей, с адаптивным макетом и поддержкой темных тем.
Ретро навигация по социальным сетям
Адаптивная навигационная составляющая с темным режимом для социальных сетей (ретро/винтаж, земляные тона, умеренная сложность)