미니멀리스트 네비게이션 바
미니멀한 스타일로 디자인된 반응형 탐색 모음 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 활용합니다.
HTML 코드
<nav class="bg-white dark:bg-gray-800 shadow-md">
<div class="max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0">
<img class="h-8" src="https://picsum.photos/40/40" alt="Logo">
</div>
<div class="hidden md:flex md:space-x-8">
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Home</a>
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">About</a>
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Services</a>
<a href="#" class="text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
</div>
</div>
<div class="flex items-center">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
</div>
</div>
</div>
</nav>
<!-- Mobile menu button -->
<div class="md:hidden">
<button class="flex items-center p-2 rounded-md text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 focus:outline-none" aria-label="Toggle Navigation">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden">
<div class="bg-white dark:bg-gray-800 shadow-md px-4 py-2 space-y-2">
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Home</a>
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">About</a>
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Services</a>
<a href="#" class="block text-gray-900 dark:text-gray-100 hover:underline">Contact</a>
</div>
</div>