Artistic_Sepia_Navigation_Bar

<nav class="bg-amber-50 dark:bg-stone-900 border-b border-amber-100 dark:border-stone-700 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex-shrink-0 flex items-center">
        <a href="#" class="text-amber-800 dark:text-amber-200 text-2xl font-bold font-serif tracking-wide">Lumière</a>
      </div>
      <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          Collections
        </a>
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          New Arrivals
        </a>
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          About Us
        </a>
        <a href="#" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-amber-700 dark:text-amber-300 hover:border-amber-300 hover:text-amber-900 dark:hover:border-amber-500 dark:hover:text-amber-100 transition duration-300 ease-in-out">
          Contact
        </a>
      </div>
      <div class="-mr-2 flex items-center sm:hidden">
        <!-- Mobile menu button -->
        <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-amber-600 dark:text-amber-400 hover:text-amber-900 dark:hover:text-amber-100 hover:bg-amber-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400" aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <!-- Icon when menu is closed. -->
          <!-- Heroicon name: outline/menu -->
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          <!-- Icon when menu is open. -->
          <!-- Heroicon name: outline/x -->
          <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu, show/hide based on menu state. -->
  <div class="sm:hidden" id="mobile-menu">
    <div class="pt-2 pb-3 space-y-1">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        Collections
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        New Arrivals
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        About Us
      </a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-stone-800 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300 ease-in-out">
        Contact
      </a>
    </div>
  </div>
</nav>