머티리얼 디자인 검색창
머티리얼 디자인 원칙에서 영감을 받은 검색창 구성요소로, Tailwind CSS를 사용하여 빌드되었습니다. 컨테이너 너비에 적응하는 반응형 동작, 호버 및 포커스 그림자 전환(깊이 효과)을 통한 시각적 피드백, 포괄적인 어두운 테마 지원을 제공합니다. 이 구성 요소에는 주요 검색 아이콘이 포함되어 있으며 깨끗하고 현대적인 미학을 보장합니다. CSS 전용 구현. 'w-full' 특성으로 인해 다양한 레이아웃에 임베딩하는 데 이상적입니다. 접근성을 위해 'input' 요소를 해당 ''와 페어링<label>하거나 설명이 포함된 'aria-label'을 제공해야 합니다.
HTML 코드
<!-- Component Start: Material Design Search Box -->
<div class="flex items-center w-full bg-white dark:bg-gray-700 shadow-md hover:shadow-lg focus-within:shadow-lg transition-shadow duration-200 ease-in-out rounded-lg">
<div class="pl-4 pr-2 py-3">
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
<input
type="search"
name="search_query"
id="material_search_box_input"
placeholder="Search..."
aria-label="Search"
class="
appearance-none
w-full h-12
pl-0 pr-4 py-3
text-base text-gray-900 dark:text-gray-100
bg-transparent
focus:outline-none
placeholder-gray-500 dark:placeholder-gray-400
"
/>
</div>
<!-- Component End -->관련 구성 요소
검색 상자 구성 요소
포트폴리오에 적합한 유사한 색 구성표를 가진 Glassmorphism 스타일의 복잡한 검색 상자 구성 요소로, HTML 및 Tailwind CSS만 사용하여 반응형 디자인과 어두운 테마를 지원합니다.