검색 상자 구성 요소
비즈니스 및 기업 웹 사이트를 위해 설계된 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를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.
Brutalism 검색 상자
Brutalism 스타일, 반응형, 어두운 테마 지원, JS 없음이 있는 검색 상자 구성 요소. 필요한 경우 이미지에 picsum.photos를 사용하고 아바타에 randomuser.me 사용합니다.