HTML 코드
<div class="max-w-md mx-auto">
<div class="relative">
<input type="text" class="w-full py-3 px-4 pr-10 text-sm text-gray-900 placeholder-gray-600 bg-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent border-2 border-gray-400 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400 dark:border-gray-600 dark:focus:ring-purple-400" placeholder="Search...">
<svg class="absolute right-3 top-3 w-5 h-5 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/ 2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
관련 구성 요소
브루탈리스트 검색창
대시보드에 대한 잔인하고 야만적인 검색 상자 구성 요소로, 보색 구성표와 적당한 복잡성을 특징으로 하며, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.
검색 상자 구성 요소
반응형 디자인과 어두운 테마를 지원하는 다크 모드 검색 상자 구성 요소입니다. JavaScript는 사용되지 않습니다. 이미지는 자리 표시자 이미지입니다.