Skeuomorphic_Vibrant_Search_Box_Component

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto p-4 sm:p-6 bg-gradient-to-br from-violet-200 to-fuchsia-200 dark:from-gray-700 dark:to-gray-900 rounded-2xl shadow-xl border-t-2 border-l-2 border-violet-300 dark:border-gray-600
      flex flex-col gap-4
      relative before:absolute before:inset-0 before:rounded-2xl before:shadow-[inset_0_0_8px_rgba(255,255,255,0.7),inset_0_0_15px_rgba(0,0,0,0.1),0_8px_16px_rgba(0,0,0,0.2)]
      dark:before:shadow-[inset_0_0_8px_rgba(0,0,0,0.6),inset_0_0_15px_rgba(255,255,255,0.05),0_8px_16px_rgba(0,0,0,0.3)]">

    <h2 class="text-center text-3xl font-extrabold text-indigo-800 dark:text-fuchsia-300 mb-4 drop-shadow-md
        relative before:absolute before:-left-2 before:-top-2 before:-bottom-2 before:-right-2 before:rounded-lg before:bg-indigo-300/30 dark:before:bg-gray-800/50 before:backdrop-blur-sm before:z-[-1] before:shadow-md">
      Find Your Inspiration
    </h2>

    <div class="relative z-10">
      <input type="search" placeholder="Search articles, topics or authors..."
        class="w-full py-3 px-5 pr-12 text-lg text-indigo-900 dark:text-gray-100 bg-violet-100 dark:bg-gray-800 rounded-full
               focus:outline-none focus:ring-4 focus:ring-violet-400 dark:focus:ring-fuchsia-500
               shadow-inner-sk place-content-center
               transition-all duration-300 ease-in-out
               border-t border-l border-violet-300 dark:border-gray-700
               relative before:absolute before:inset-0 before:rounded-full before:shadow-[inset_0_0_8px_rgba(0,0,0,0.05),inset_0_0_10px_rgba(255,255,255,0.7)]
               dark:before:shadow-[inset_0_0_8px_rgba(0,0,0,0.3),inset_0_0_10px_rgba(255,255,255,0.05)]">
      <button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 flex items-center justify-center
                           bg-gradient-to-br from-pink-500 to-rose-600 dark:from-fuchsia-700 dark:to-purple-900
                           rounded-full shadow-lg hover:from-pink-600 hover:to-rose-700 dark:hover:from-fuchsia-800 dark:hover:to-purple-950
                           transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                           border-b-2 border-r-2 border-pink-700 dark:border-purple-800">
        <svg class="w-6 h-6 text-white stroke-current stroke-[2px] leading-3" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <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>

    <div class="flex justify-around mt-4 flex-wrap gap-2">
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-indigo-400 dark:bg-purple-700 text-white shadow-md
                     hover:bg-indigo-500 dark:hover:bg-purple-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-indigo-500 dark:border-purple-800">
        Category 1
      </button>
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-emerald-400 dark:bg-teal-700 text-white shadow-md
                     hover:bg-emerald-500 dark:hover:bg-teal-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-emerald-500 dark:border-teal-800">
        Popular
      </button>
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-amber-400 dark:bg-orange-700 text-white shadow-md
                     hover:bg-amber-500 dark:hover:bg-orange-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-amber-500 dark:border-orange-800">
        New
      </button>
      <button class="py-2 px-4 rounded-full text-sm font-semibold
                     bg-cyan-400 dark:bg-sky-700 text-white shadow-md
                     hover:bg-cyan-500 dark:hover:bg-sky-800
                     transform-gpu active:scale-95 transition-all duration-200 ease-in-out
                     border-b-2 border-r-2 border-cyan-500 dark:border-sky-800">
        Trending
      </button>
    </div>

  </div>
</div>

<style>
/* Additional custom styles for skeuomorphism (optional, can be fully Tailwind with extended config) */
/* This is not strictly necessary but can enhance the depth if Tailwind's box-shadow is not enough */
.shadow-inner-sk {
  box-shadow: inset 0 0 8px rgba(0,0,0,0.05), inset 0 0 10px rgba(255,255,255,0.7);
}
.dark .shadow-inner-sk {
  box-shadow: inset 0 0 8px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.05);
}
</style>