Glassmorphism Search Box Component

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 duration-300 p-4">
  <div class="w-full max-w-md backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl p-6 shadow-lg border border-white/30 dark:border-gray-700/30 transition-all duration-300 ease-in-out">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4 text-center select-none">
      Search Content
    </h3>
    <div class="relative flex items-center w-full">
      <input
        type="text"
        placeholder="Search articles, topics..."
        class="flex-grow py-3 pl-4 pr-12 text-gray-800 dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400 bg-white/40 dark:bg-gray-700/40 border border-white/50 dark:border-gray-600/50 rounded-xl focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-300 transition-all duration-300 ease-in-out shadow-inner placeholder-shown:italic"
      />
      <button
        class="absolute right-2 top-1/2 -translate-y-1/2 p-2 rounded-lg bg-white/60 dark:bg-gray-700/60 text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700 hover:scale-105 active:scale-95 transition-all duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-300"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-6 w-6"
          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>
      </button>
    </div>
    <p class="text-xs text-gray-600 dark:text-gray-400 mt-3 text-center select-none">
      Discover new insights and stories.
    </p>
  </div>
</div>