Neumorphism Earth Tone Dropdown Menu

<div class="p-8 bg-gradient-to-br from-stone-200 to-stone-400 min-h-screen dark:from-stone-800 dark:to-stone-900 flex items-start justify-center font-sans">
  <div class="relative inline-block text-left">
    <div>
      <button type="button" class="inline-flex justify-center w-full rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark px-6 py-3 bg-gradient-to-br from-stone-300 to-stone-200 dark:from-stone-700 dark:to-stone-800 text-stone-700 dark:text-stone-300 text-lg font-medium hover:from-stone-400 hover:to-stone-300 dark:hover:from-stone-600 dark:hover:to-stone-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-stone-100 focus:ring-stone-500 transition-all duration-300" id="options-menu" aria-haspopup="true" aria-expanded="true">
        Product Categories
        <svg class="-mr-1 ml-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- Dropdown panel, show/hide based on menu state. -->
    <div class="origin-top-right absolute right-0 mt-4 w-72 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gradient-to-br from-stone-300 to-stone-200 dark:from-stone-700 dark:to-stone-800 ring-1 ring-black ring-opacity-5 focus:outline-none opacity-100 scale-100 transition-all duration-300 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
      <div class="py-2" role="none">
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Electronics</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Apparel</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Home Goods</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Books & Media</a>
        <a href="#" class="block px-6 py-3 text-lg text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 hover:text-white dark:hover:text-white rounded-lg mx-2 my-1 transition-colors duration-200" role="menuitem">Sports & Outdoors</a>
      </div>
    </div>
  </div>
</div>

<!-- Tailwind CSS Neumorphic Shadow Utility Classes -->
<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a8a8a8, -8px -8px 16px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
  }
  @media (max-width: 640px) {
    .max-w-xs {
      max-width: 20rem; /* 320px */
    }
  }
  @media (min-width: 641px) and (max-width: 768px) {
    .sm\:max-w-md {
      max-width: 28rem; /* 448px */
    }
  }
  @media (min-width: 769px) and (max-width: 1024px) {
    .md\:max-w-lg {
      max-width: 32rem; /* 512px */
    }
  }
  @media (min-width: 1025px) {
    .lg\:max-w-xl {
      max-width: 36rem; /* 576px */
    }
  }
</style>