CCHub Logo CCHub Tailwind Collection
구성 요소 필터 필터 구성 요소

필터 구성 요소

스큐어모픽 스타일로 디자인된 필터 컴포넌트로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다. 이 구성 요소는 스타일을 지정하기 위해 Tailwind CSS를 사용하며 임의의 자리 표시자 이미지와 아바타를 포함합니다.

미리 보기

HTML 코드 

<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Filters</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <input type="checkbox" id="filter1" class="w-4 h-4 text-green-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-600" />
      <label for="filter1" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 1</label>
    </div>
    <div class="flex items-center">
      <input type="checkbox" id="filter2" class="w-4 h-4 text-blue-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" />
      <label for="filter2" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 2</label>
    </div>
    <div class="flex items-center">
      <input type="checkbox" id="filter3" class="w-4 h-4 text-red-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-red-600" />
      <label for="filter3" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 3</label>
    </div>
  </div>
  <div class="mt-6">
    <button class="w-full text-white bg-blue-500 hover:bg-blue-700 rounded-lg p-2 text-center transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Apply Filters</button>
  </div>
  <div class="mt-4">
    <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="rounded-lg shadow-md" />
    <img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="rounded-lg shadow-md mt-4" />
  </div>
  <div class="flex justify-between items-center mt-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-lg" />
    <span class="text-gray-800 dark:text-gray-200">User Name</span>
  </div>
</div>

관련 구성 요소

브루탈리스트필터컴포넌트

브루탈리즘 스타일의 필터 구성 요소로, 높은 대비, 대담한 타이포그래피, 특이한 간격이 있습니다. 여기에는 확인란, 라디오 버튼 및 가격대 슬라이더가 포함됩니다. 반응형 효과는 미디어 쿼리와 유체 단위를 통해 달성됩니다. 다크 모드는 CSS를 통해 지원됩니다.

열다

필터 구성 요소

Tailwind CSS가 포함된 브루탈리스트 필터 컴포넌트로, 반응형 디자인, 어두운 테마 지원, 이미지 및 아바타에 대한 플레이스홀더를 특징으로 합니다.

열다

필터컴포넌트뉴모피즘

비즈니스/기업 웹 사이트용으로 설계된 회색조 색 구성표를 사용하여 Neumorphism 소프트 UI로 스타일이 지정된 간단한 반응형 필터 구성 요소입니다. 이 구성 요소는 다크 모드를 지원하며 JavaScript 없이 Tailwind CSS로 빌드됩니다.

열다