Industrial_Candy_SearchBox

<div class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-zinc-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-xl bg-white dark:bg-zinc-800 rounded-lg shadow-xl overflow-hidden border-2 border-violet-400 dark:border-zinc-700 transition-all duration-300 ease-in-out">
    <div class="p-6 sm:p-8 md:p-10 border-b-2 border-violet-300 dark:border-zinc-700 flex items-center justify-between">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-violet-700 dark:text-pink-400 uppercase tracking-wide">Search Portal</h2>
      <svg class="h-6 w-6 sm:h-8 sm:w-8 text-violet-500 dark:text-pink-300 transform rotate-45" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
      </svg>
    </div>

    <div class="p-6 sm:p-8 md:p-10 space-y-6">
      <div class="relative">
        <input type="text" placeholder="Search for products, services, or pages..." class="w-full p-4 pl-12 pr-4 rounded-full border-2 border-pink-400 dark:border-pink-600 bg-pink-50 dark:bg-zinc-900 text-violet-900 dark:text-gray-100 placeholder-violet-400 dark:placeholder-pink-400 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 transition-all duration-200 ease-in-out text-base sm:text-lg font-medium shadow-inner">
        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
          <svg class="h-6 w-6 text-pink-500 dark:text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <select class="w-full p-3 pl-4 rounded-lg border-2 border-green-400 dark:border-green-600 bg-green-50 dark:bg-zinc-900 text-violet-900 dark:text-gray-100 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transition-all duration-200 ease-in-out text-sm sm:text-base cursor-pointer">
          <option>All Categories</option>
          <option>Solutions</option>
          <option>Industries</option>
          <option>Resources</option>
          <option>About Us</option>
        </select>
        <select class="w-full p-3 pl-4 rounded-lg border-2 border-cyan-400 dark:border-cyan-600 bg-cyan-50 dark:bg-zinc-900 text-violet-900 dark:text-gray-100 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-700 transition-all duration-200 ease-in-out text-sm sm:text-base cursor-pointer">
          <option>Latest Records</option>
          <option>Most Relevant</option>
          <option>Alphabetical A-Z</option>
          <option>Date Ascending</option>
        </select>
      </div>

      <div class="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 sm:pt-6">
        <button class="w-full sm:w-auto px-8 py-3 rounded-full bg-violet-500 text-white dark:bg-pink-600 dark:text-white font-bold uppercase tracking-wider text-base sm:text-lg hover:bg-violet-600 dark:hover:bg-pink-700 focus:outline-none focus:ring-4 focus:ring-violet-300 dark:focus:ring-pink-500 transition-all duration-200 ease-in-out shadow-lg transform hover:scale-105">
          Apply Search
        </button>
        <button class="w-full sm:w-auto px-6 py-2 rounded-full border-2 border-gray-300 dark:border-zinc-600 text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-700 font-semibold text-sm sm:text-base hover:bg-gray-200 dark:hover:bg-zinc-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-zinc-500 transition-all duration-200 ease-in-out">
          Clear Filters
        </button>
      </div>
    </div>

    <div class="p-6 sm:p-8 md:p-10 border-t-2 border-violet-300 dark:border-zinc-700 text-center text-sm text-gray-500 dark:text-gray-400">
      <p>Powered by <a href="#" class="text-violet-600 dark:text-pink-400 hover:underline">Corporate Solutions Inc.</a></p>
    </div>
  </div>
</div>