Neon_Glow_Search_Box

<div class="p-4 sm:p-6 md:p-8 bg-gray-900 min-h-screen flex items-center justify-center dark:bg-gray-950">
  <div class="w-full max-w-lg">
    <div class="relative flex items-center w-full max-w-md mx-auto rounded-full shadow-lg dark:shadow-xl group transition-all duration-300 ease-in-out
                bg-gradient-to-r from-gray-800 to-gray-900 border border-gray-700
                dark:from-gray-900 dark:to-black dark:border-gray-800
                focus-within:border-blue-500 focus-within:shadow-blue-500/50 dark:focus-within:border-pink-500 dark:focus-within:shadow-pink-500/50">

      <!-- Neon Glow Border Effect -->
      <div class="absolute inset-0 rounded-full blur-sm opacity-0 group-hover:opacity-60 dark:group-hover:opacity-70
                  bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 dark:from-blue-600 dark:via-purple-600 dark:to-pink-600
                  transition-opacity duration-500 ease-in-out"></div>
      <div class="absolute inset-0 rounded-full blur-md opacity-0 group-hover:opacity-40 dark:group-hover:opacity-50
                  bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 dark:from-blue-500 dark:via-purple-500 dark:to-pink-500
                  transition-opacity duration-500 ease-in-out delay-100"></div>
      <div class="absolute inset-0 rounded-full blur-lg opacity-0 group-hover:opacity-20 dark:group-hover:opacity-30
                  bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
                  transition-opacity duration-500 ease-in-out delay-200"></div>

      <!-- Inner content and input -->
      <div class="relative z-10 flex items-center w-full rounded-full overflow-hidden">
        <input type="text" placeholder="Search for anything..." class="flex-grow py-3 pl-6 pr-2 text-white bg-transparent outline-none rounded-l-full
                      placeholder-gray-400 dark:placeholder-gray-500
                      font-medium text-lg leading-tight
                      focus:ring-0 appearance-none
                      transition-colors duration-300 ease-in-out
                      dark:text-gray-100">

        <button type="submit" class="flex-shrink-0 p-3 pr-6 rounded-r-full
                        bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-700 dark:to-purple-700
                        hover:from-blue-700 hover:to-purple-700 dark:hover:from-blue-800 dark:hover:to-purple-800
                        transition-all duration-300 ease-in-out
                        transform hover:scale-105 active:scale-95
                        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-pink-500 dark:focus:ring-offset-gray-900
                        shadow-md hover:shadow-lg dark:shadow-xl
                        group-hover:shadow-blue-500/40 dark:group-hover:shadow-pink-500/40">
          <svg class="w-6 h-6 text-white" 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>
        </button>
      </div>
    </div>
  </div>
</div>