<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>
