紙/印刷にインスパイアされた政府ナビゲーション

<header class="font-serif bg-gradient-to-b from-amber-50 to-amber-100 dark:from-stone-900 dark:to-stone-950 text-stone-800 dark:text-stone-200 shadow-lg">
  <div class="container mx-auto px-4 py-4 md:py-6">
    <div class="flex flex-col md:flex-row items-center justify-between gap-4">
      <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse">
        <svg class="w-10 h-10 text-amber-900 dark:text-amber-600" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93h7v7.93zM10.85 4.07c.18-.03.36-.07.55-.07s.37.04.55.07L12 2.05c-3.95-.49-7-3.85-7-7.93h7v7.93zM13 19.93V12h7c0 4.08-3.05 7.44-7 7.93zM13.15 4.07C13.33 4.04 13.5 4 13.68 4s.37.04.55.07L12 2.05c-3.95-.49-7-3.85-7-7.93h7v7.93zM22 12h-7c0-4.08 3.05-7.44 7-7.93v7.93z"></path>
        </svg>
        <span class="self-center text-3xl font-bold whitespace-nowrap text-amber-900 dark:text-amber-500">Gob.us</span>
      </a>

      <div class="flex items-center w-full md:w-auto mt-4 md:mt-0">
        <form class="flex w-full">
          <label for="default-search" class="mb-2 text-sm font-medium text-stone-900 sr-only dark:text-white">Search</label>
          <div class="relative w-full">
            <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
              <svg class="w-4 h-4 text-stone-500 dark:text-stone-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
              </svg>
            </div>
            <input type="search" id="default-search" class="block w-full p-2.5 ps-10 text-sm text-stone-900 border border-stone-300 rounded-lg bg-stone-50 focus:ring-amber-500 focus:border-amber-500 dark:bg-stone-800 dark:border-stone-700 dark:placeholder-stone-400 dark:text-white dark:focus:ring-amber-500 dark:focus:border-amber-500" placeholder="Search services, forms, news..." required>
            <button type="submit" class="text-white absolute end-2.5 bottom-2 bg-amber-700 hover:bg-amber-800 focus:ring-4 focus:outline-none focus:ring-amber-300 font-medium rounded-lg text-sm px-4 py-1.5 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-800">Search</button>
          </div>
        </form>
      </div>
    </div>

    <nav class="mt-6 bg-amber-200 dark:bg-stone-800 p-3 rounded-lg shadow-inner border-t-2 border-l-2 border-stone-300 dark:border-stone-700">
      <ul class="flex flex-wrap justify-center md:justify-start gap-x-6 gap-y-3 text-lg font-semibold text-amber-900 dark:text-amber-200">
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">Home</a></li>
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">About Us</a></li>
        <li>
          <div class="relative group">
            <button class="flex items-center hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent group-hover:border-amber-700 dark:group-hover:border-amber-400 transition duration-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 rounded-sm">
              Services
              <svg class="w-4 h-4 ml-1" 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 mt-2 w-48 bg-stone-50 dark:bg-stone-700 border border-stone-200 dark:border-stone-600 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition duration-300 z-10">
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Online Forms</a>
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Permits & Licenses</a>
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Tax Information</a>
              <a href="#" class="block px-4 py-2 text-sm text-stone-800 dark:text-stone-200 hover:bg-amber-100 dark:hover:bg-stone-600">Public Records</a>
            </div>
          </div>
        </li>
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">News & Events</a></li>
        <li><a href="#" class="hover:text-amber-700 dark:hover:text-amber-400 pb-1 border-b-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400 transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>