Glassmorphism 검색 상자 구성 요소
블로그 또는 콘텐츠 사이트에 적합한 회색조의 반응형 glassmorphism 스타일 검색 상자 구성 요소로, 젖빛 유리와 같은 반투명 입력 및 버튼이 특징입니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<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>