Bauhaus_Agriculture_Search_Box

<div class="p-4 sm:p-6 md:p-8 bg-amber-50 dark:bg-stone-900 border-b border-amber-200 dark:border-stone-700 font-sans">
  <div class="max-w-4xl mx-auto py-4 sm:py-6 md:py-8 bg-amber-100 dark:bg-stone-800 shadow-lg rounded-lg overflow-hidden border-2 border-amber-300 dark:border-stone-700">
    <div class="px-5 py-4 sm:px-6 sm:py-5 flex flex-col sm:flex-row items-center justify-between">
      <h2 class="text-xl sm:text-2xl font-bold text-stone-800 dark:text-stone-100 mb-4 sm:mb-0 text-center sm:text-left tracking-wider uppercase">
        Field Finder
      </h2>
      <div class="relative w-full sm:w-auto flex-grow max-w-md">
        <input type="text" placeholder="Search crops, fields, or equipment..." class="w-full py-3 pl-12 pr-4 rounded-full bg-amber-50 dark:bg-stone-700 text-stone-700 dark:text-stone-200 placeholder-stone-500 dark:placeholder-stone-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300 border border-amber-300 dark:border-stone-600 shadow-inner text-base sm:text-lg transition-all duration-300 ease-in-out">
        <svg class="absolute left-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-stone-500 dark:text-stone-400" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
      </div>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 px-5 py-4 sm:px-6 sm:py-5 border-t border-amber-200 dark:border-stone-700">
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600 shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 012.707 13H3a1 1 0 000-2H2.707L3 10.707V8a7 7 0 0114 0v2.707l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a6 6 0 00-6-6zM5 16a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"></path></svg>
        Plots
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.586l.293.293A1 1 0 0117.293 13H17a1 1 0 100-2h.293l-.707-.707V8a1 1 0 00-1-1H4a1 1 0 00-1 1v.586L2.707 9.707A1 1 0 012.707 11H3a1 1 0 100-2h.293l-.707-.707V8a2 2 0 012-2h2zm0 6a2 2 0 100 4h8a2 2 0 100-4H6z" clip-rule="evenodd"></path></svg>
        Crops
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M7 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM10 3a1 1 0 00-2 0v1a1 1 0 002 0V3zM13 3a1 1 0 00-2 0v1a1 1 0 002 0V3z"></path><path fill-rule="evenodd" d="M3 8a3 3 0 013-3h8a3 3 0 013 3v7a3 3 0 01-3 3H6a3 3 0 01-3-3V8zm5-1a1 1 0 000 2h4a1 1 0 100-2H8zm-1 3a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
        Equipment
      </button>
      <button class="flex items-center justify-center p-3 sm:p-4 bg-amber-200 hover:bg-amber-300 dark:bg-stone-700 dark:hover:bg-stone-600 rounded-lg text-stone-700 dark:text-stone-100 font-semibold text-sm sm:text-base transition-colors duration-200 ease-in-out border-b-2 border-r-2 border-amber-400 dark:border-amber-600  shadow-md transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-300">
        <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.5 1V.5a.5.5 0 011 0V1A5.5 5.5 0 007 6.5h6A5.5 5.5 0 0018.5 1V.5a.5.5 0 011 0V1a6.5 6.5 0 01-6.5 6.5H7A6.5 6.5 0 01.5 1zM2 11.5a1 1 0 112 0 1 1 0 01-2 0zm14 0a1 1 0 112 0 1 1 0 01-2 0z" clip-rule="evenodd"></path><path d="M11 5H9a1 1 0 00-1 1v3a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1zm3 11a1 1 0 100-2 1 1 0 000 2zm-8 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
        Weather
      </button>
    </div>
  </div>
</div>