Компонент компонентов улучшения навигации

<nav class="bg-blue-200 dark:bg-gray-900 p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center flex-wrap">
    <div class="text-xl font-bold text-blue-800 dark:text-blue-200 uppercase tracking-widest">Company Name</div>
    <div class="block lg:hidden">
      <button id="nav-toggle" class="flex items-center px-3 py-2 border rounded text-blue-800 border-blue-800 dark:text-blue-200 dark:border-blue-200">
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/></svg>
      </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="nav-content">
      <ul class="lg:flex items-center justify-end flex-1">
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Home</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">About</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Services</a>
        </li>
        <li class="mr-6 my-2 lg:my-0">
          <a href="#" class="text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-400 text-lg font-bold uppercase">Contact</a>
        </li>
         <li class="my-2 lg:my-0">
          <div class="relative">
            <button class="bg-blue-800 dark:bg-blue-200 text-blue-200 dark:text-blue-800 font-bold uppercase py-2 px-4 border border-blue-800 dark:border-blue-200 rounded">
              Dropdown
            </button>
            <div class="absolute right-0 mt-2 w-48 bg-blue-200 dark:bg-gray-700 rounded shadow-lg py-2 z-10 hidden">
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 1</a>
              <a href="#" class="block px-4 py-2 text-blue-800 dark:text-blue-200 hover:bg-blue-300 dark:hover:bg-gray-600">Link 2</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>