Navigation Components 컴포넌트
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>