Navigation Bar 구성 요소

<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>