Navigation Bar 구성 요소
종이/인쇄물에서 영감을 받은 미적 요소와 보석 색조 색 구성표로 설계된 복잡하고 반응이 빠른 탐색 모음 구성 요소로, 농업/농업 웹 사이트에 적합합니다. 다크 모드 지원 및 여러 대화형 요소가 포함되어 있습니다.
HTML 코드
<header class="bg-emerald-700 font-serif shadow-xl dark:bg-emerald-950">
<nav class="container mx-auto px-4 py-3 md:flex md:items-center md:justify-between">
<div class="flex items-center justify-between">
<a href="#" class="flex items-center text-2xl font-bold text-white transition duration-300 ease-in-out hover:text-emerald-200 dark:text-emerald-50 dark:hover:text-emerald-300">
<img src="https://picsum.photos/id/1084/40/40" alt="Farm Logo" class="mr-2 rounded-full border-2 border-emerald-500 shadow-md dark:border-emerald-700">
AgriConnect
</a>
<button class="peer rounded-md p-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 md:hidden" type="button" aria-label="Toggle navigation">
<svg class="h-6 w-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 12h16M4 18h16"></path>
</svg>
</button>
</div>
<div class="relative hidden flex-col transition-all duration-500 ease-in-out peer-focus:flex md:flex md:flex-row md:items-center md:space-x-8 lg:space-x-12">
<a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200" aria-current="page">Home</a>
<div class="group relative">
<button class="flex items-center rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 focus:outline-none dark:hover:bg-emerald-800 dark:hover:text-emerald-200" type="button">
Products
<svg class="ml-2 h-4 w-4 transform transition-transform duration-300 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="absolute left-0 top-full hidden w-48 origin-top-right scale-y-0 transform rounded-md bg-emerald-600 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-y-100 group-hover:block dark:bg-emerald-800">
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Seeds & Grains</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Fertilizers</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Equipment</a>
</div>
</div>
<div class="group relative">
<button class="flex items-center rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 focus:outline-none dark:hover:bg-emerald-800 dark:hover:text-emerald-200" type="button">
Services
<svg class="ml-2 h-4 w-4 transform transition-transform duration-300 ease-in-out group-hover:rotate-180" 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="M19 9l-7 7-7-7"></path></svg>
</button>
<div class="absolute left-0 top-full hidden w-48 origin-top-right scale-y-0 transform rounded-md bg-emerald-600 shadow-lg transition-all duration-300 ease-in-out group-hover:scale-y-100 group-hover:block dark:bg-emerald-800">
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Consultation</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Soil Testing</a>
<a href="#" class="block px-4 py-2 text-white hover:bg-emerald-700 dark:hover:bg-emerald-900">Logistics</a>
</div>
</div>
<a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">Resources</a>
<a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">About Us</a>
<a href="#" class="block rounded-md px-3 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-600 hover:text-emerald-100 dark:hover:bg-emerald-800 dark:hover:text-emerald-200">Contact</a>
<div class="space-x-4 md:pl-4">
<button class="rounded-full bg-emerald-500 px-4 py-2 text-white transition duration-300 ease-in-out hover:bg-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-300 dark:bg-emerald-700 dark:hover:bg-emerald-600" type="button">
<svg class="inline-block h-5 w-5 align-text-bottom" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 001 1h14a1 1 0 001-1V4a1 1 0 00-1-1H3zm2 1.5a.5.5 0 01.5-.5h9a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-9a.5.5 0 01-.5-.5v-1zM5.5 9a.5.5 0 000 1h9a.5.5 0 000-1h-9z" clip-rule="evenodd"></path></svg>
Dashboard
</button>
</div>
</div>
</nav>
</header>
관련 구성 요소
Luxury_Premium_Dating_Social_NavBar
데이트/소셜 플랫폼을 위한 고급스러운/프리미엄 스타일의 탐색 모음으로, 우아한 타이포그래피, 고대비 색 구성표, 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다. 프로필 아바타 및 알림 아이콘과 같은 대화형 요소가 포함됩니다.
Artistic_Sepia_Navigation_Bar
다크 모드 지원을 포함하여 패션 및 뷰티 브랜드에 적합한 부드럽고 예술적인 세피아 톤의 미학을 갖춘 간단하고 반응이 빠른 탐색 모음입니다.