3D_Candy_SearchBox_Manufacturing

<div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-pink-100 via-purple-100 to-blue-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 font-sans">
  <div class="relative w-full max-w-md mx-auto">
    <div class="absolute -inset-1 bg-gradient-to-r from-pink-400 via-purple-400 to-blue-400 rounded-3xl blur-xl opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt dark:from-pink-600 dark:via-purple-600 dark:to-blue-600"></div>
    <div class="relative p-6 rounded-3xl shadow-xl bg-white dark:bg-gray-800 border border-t-pink-200 border-l-purple-200 border-b-blue-200 border-r-green-200 dark:border-t-pink-700 dark:border-l-purple-700 dark:border-b-blue-700 dark:border-r-green-700 transform transition duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-6 text-pink-600 dark:text-pink-400 tracking-tight leading-tight drop-shadow-sm">Find Your <span class="text-purple-600 dark:text-purple-400">Components</span></h2>
      <div class="relative flex items-center w-full shadow-inner rounded-full bg-blue-50 dark:bg-gray-700 border border-blue-200 dark:border-blue-600 transition-all duration-300 focus-within:shadow-xl focus-within:ring-2 focus-within:ring-purple-300 focus-within:border-purple-400 dark:focus-within:ring-purple-700 dark:focus-within:border-purple-500">
        <svg class="h-6 w-6 ml-4 text-purple-400 dark:text-blue-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>
        <input type="text" placeholder="Search for parts, models, or documentation..." class="flex-grow py-3 px-4 text-lg bg-transparent border-none outline-none placeholder-blue-300 dark:placeholder-gray-500 text-gray-800 dark:text-gray-100 rounded-full pr-12" aria-label="Search for components">
        <button type="button" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 text-white shadow-lg sm:hover:from-pink-600 sm:hover:to-purple-600 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-300 dark:focus:ring-pink-700" aria-label="Initiate search">
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8c1.332 0 2.593-.576 3.49-1.576l4.053 4.054a1 1 0 001.414-1.414l-4.053-4.054C13.576 10.593 13 9.332 13 8a5 5 0 00-10 0zM12 8a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
      <p class="mt-6 text-center text-sm text-gray-500 dark:text-gray-400">
        Need assistance? <a href="#" class="text-purple-600 dark:text-purple-400 font-semibold hover:underline transition-colors duration-200">Contact support</a> or browse our <a href="#" class="text-blue-600 dark:text-blue-400 font-semibold hover:underline transition-colors duration-200">knowledge base</a>.
      </p>
    </div>
  </div>
</div>