CCHub Logo CCHub Tailwind Collection
구성 요소 검색창 머티리얼 디자인 검색창

머티리얼 디자인 검색창

머티리얼 디자인 원칙에서 영감을 받은 검색창 구성요소로, 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 -->

관련 구성 요소

Industrial_Candy_SearchBox

산업적이면서도 사탕 같은 미학을 지닌 적당히 복잡하고 반응이 빠른 검색 상자 구성 요소로, 전문 기업 웹 사이트를 위해 설계되었으며 다크 모드를 지원합니다.

열다

브루탈리스트 검색창

대시보드에 대한 잔인하고 야만적인 검색 상자 구성 요소로, 보색 구성표와 적당한 복잡성을 특징으로 하며, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다.

열다

검색 상자 구성 요소

비즈니스/기업 웹사이트를 위한 반응형 검색 상자 구성 요소로, 마이크로 인터랙션과 유사한 색 구성표를 특징으로 합니다. 여기에는 검색 입력, 버튼, 사용자 아바타와 텍스트가 있는 동적 결과 드롭다운이 포함되어 다크 모드를 지원합니다.

열다