검색 상자 구성 요소
글래스모피즘 스타일로 설계된 반응형 검색 상자 구성 요소로, 다크 모드를 지원하고 전자 상거래 애플리케이션에 맞게 조정되었습니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800">
<div class="relative">
<input type="text" placeholder="Search for products..." class="w-full md:w-96 p-4 border border-transparent rounded-lg bg-white dark:bg-gray-900 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none focus:border-transparent focus:ring focus:ring-opacity-50 backdrop-blur-md bg-opacity-30 shadow-lg">
<button class="absolute right-0 top-0 bottom-0 flex items-center px-4 py-2 text-white bg-blue-500 hover:bg-blue-600 rounded-r-lg border border-transparent backdrop-blur-md bg-opacity-30">
<img src="https://picsum.photos/20/20" alt="search icon" class="w-5 h-5" />
</button>
</div>
</div>
<div class="mt-4 text-center text-gray-700 dark:text-gray-300">
<h2 class="text-xl font-semibold">Explore Our Products</h2>
<div class="flex justify-center mt-2 space-x-4">
<img src="https://picsum.photos/200/100" alt="Product 1" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
<img src="https://picsum.photos/200/100?random=1" alt="Product 2" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
<img src="https://picsum.photos/200/100?random=2" alt="Product 3" class="w-32 h-32 object-cover rounded-lg shadow-md bg-white dark:bg-gray-800" />
</div>
</div>관련 구성 요소
Glassmorphism 검색 상자 구성 요소
파스텔 색상을 사용하는 젖빛 유리 효과(glassmorphism)가 있는 현대적인 검색 상자 구성 요소입니다. 구성 요소는 간단하지만 우아하며 전문 비즈니스 웹 사이트를 위해 설계되었습니다. 미묘한 흐림 효과, 반응형 디자인 및 다크 모드 지원이 있는 반투명 배경이 특징입니다. 검색 상자에는 검색 아이콘과 회사 환경에 잘 맞는 깨끗한 입력 필드가 포함되어 있습니다.
간단한 3D 파스텔 검색 상자
3D와 유사한 디자인, 파스텔 색 구성표 및 어두운 테마 지원을 갖춘 반응형 검색 상자 구성 요소로, 블로그/콘텐츠 웹 사이트용 Tailwind CSS로 구축되었습니다.