Industrial_Food_Search_Box

<div class="bg-gray-100 dark:bg-gray-900 min-h-max flex items-center justify-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl rounded-lg border-2 border-gray-300 dark:border-gray-700 overflow-hidden">
    <div class="flex flex-col sm:flex-row items-center p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 border-b-2 border-gray-200 dark:border-gray-700">
      <div class="flex-shrink-0 text-gray-700 dark:text-gray-300 mr-0 sm:mr-4 mb-2 sm:mb-0">
        <svg class="w-8 h-8 sm:w-10 sm:h-10" 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 class="flex-grow w-full">
        <label for="search-food" class="sr-only">Search for food or restaurants</label>
        <input id="search-food" type="text" placeholder=" cravings... pizza, sushi, burgers, pasta" class="w-full p-3 text-base sm:text-lg bg-transparent text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent font-mono tracking-wide" aria-label="Search for food or restaurants">
      </div>
      <button class="mt-4 sm:mt-0 ml-0 sm:ml-4 px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white font-bold rounded-md shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-gray-50 dark:focus:ring-offset-gray-850 flex items-center justify-center">
        <svg class="w-5 h-5 mr-2" 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>
        Search
      </button>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-4 gap-px bg-gray-200 dark:bg-gray-700 border-t-2 border-gray-200 dark:border-gray-700">
      <!-- Category 1 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/1080/60/60" alt="Pizza" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Pizza</span>
      </div>
      <!-- Category 2 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/1054/60/60" alt="Sushi" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Sushi</span>
      </div>
      <!-- Category 3 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/111/60/60" alt="Burgers" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Burgers</span>
      </div>
      <!-- Category 4 -->
      <div class="p-3 sm:p-4 bg-white dark:bg-gray-800 flex flex-col items-center justify-center text-center group transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-750 cursor-pointer">
        <img src="https://picsum.photos/id/1084/60/60" alt="Desserts" class="w-12 h-12 sm:w-16 sm:h-16 rounded-full border-2 border-gray-300 dark:border-gray-600 object-cover mb-2 transform group-hover:scale-110 transition-transform" />
        <span class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 font-semibold uppercase tracking-wider group-hover:text-orange-600 dark:group-hover:text-orange-400">Desserts</span>
      </div>
    </div>

    <div class="p-4 sm:p-6 bg-gray-100 dark:bg-gray-850 border-t-2 border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-center justify-between">
      <div class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mb-3 sm:mb-0">
        Explore popular cuisines or filter by location.
      </div>
      <button class="flex items-center px-4 py-2 bg-gray-300 hover:bg-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 text-sm font-semibold rounded-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">
        <svg class="w-4 h-4 mr-2" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
        </svg>
        Advanced Filters
      </button>
    </div>
  </div>
</div>