Navigation Bar 구성 요소
Microinteractions가 있는 반응형 탐색 모음과 Tailwind CSS를 사용한 다크 모드 지원.
HTML 코드
<nav class="bg-white dark:bg-gray-800 shadow-md">
<div class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div class="text-xl font-semibold text-gray-700 dark:text-white">
<a href="#" class="hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out">My Website</a>
</div>
<div class="hidden md:block">
<div class="flex items-center space-x-4">
<a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Home</a>
<a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">About</a>
<a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Services</a>
<a href="#" class="text-gray-700 dark:text-white hover:text-gray-900 dark:hover:text-gray-200 transition duration-300 ease-in-out transform hover:scale-105">Contact</a>
</div>
</div>
<div class="md:hidden">
<button class="text-gray-700 dark:text-white focus:outline-none">
<svg viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
<path fill-rule="evenodd" d="M4 5h16a1 1 0 010 2H4a1 1 0 110-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2zm0 6h16a1 1 0 010 2H4a1 1 0 010-2z"></path>
</svg>
</button>
</div>
</div>
</div>
</nav>관련 구성 요소
Gradient/Color Transitions(그라디언트/색상 전환), Grayscale Dashboard, Navigation Bar(그레이스케일 대시보드, 네비게이션 바)
대시보드를 위한 복잡하고 반응이 빠른 탐색 모음으로, 그레이스케일 색 구성표의 그라데이션 전환을 특징으로 합니다. 여러 대화형 요소와 완전한 다크 모드 지원이 포함됩니다.
아르데코 네비게이션 바
아르데코에서 영감을 받은 반응형 CRM/비즈니스 도구를 위한 탐색 모음으로, 기하학적 패턴, 풍부한 보석 색조 및 다크 모드 지원을 특징으로 합니다. 대화형 요소를 포함하여 중간 정도의 복잡성으로 설계되었습니다.