검색 상자 구성 요소
비즈니스 및 기업 웹 사이트를 위해 설계된 3D 스타일의 검색 상자 구성 요소로, 깊이, 대화형 요소 및 다크 모드를 지원하는 복잡한 인터페이스를 특징으로 합니다.
HTML 코드
<div class="flex flex-col items-center justify-center p-6 bg-gradient-to-r from-gray-800 to-gray-700 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<h2 class="text-white text-2xl font-semibold mb-4">Search Our Resources</h2>
<div class="relative w-full max-w-md">
<input type="text" placeholder="Search..." class="w-full p-4 pl-10 text-gray-900 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition-all duration-200" />
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
<img src="https://picsum.photos/20/20" alt="Search Icon" class="w-5 h-5 text-gray-400 dark:text-gray-500" />
</div>
</div>
<div class="flex justify-between items-center w-full mt-4">
<button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg shadow hover:bg-blue-700 transition-all duration-200">Search</button>
<button class="px-4 py-2 text-sm font-medium text-gray-200 dark:text-gray-400 hover:underline">Advanced Search</button>
</div>
</div>관련 구성 요소
브루탈리스트 검색창
대시보드에 대한 잔인하고 야만적인 검색 상자 구성 요소로, 보색 구성표와 적당한 복잡성을 특징으로 하며, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.
Glassmorphism 검색 상자 구성 요소
파스텔 색상을 사용하는 젖빛 유리 효과(glassmorphism)가 있는 현대적인 검색 상자 구성 요소입니다. 구성 요소는 간단하지만 우아하며 전문 비즈니스 웹 사이트를 위해 설계되었습니다. 미묘한 흐림 효과, 반응형 디자인 및 다크 모드 지원이 있는 반투명 배경이 특징입니다. 검색 상자에는 검색 아이콘과 회사 환경에 잘 맞는 깨끗한 입력 필드가 포함되어 있습니다.