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

필터 구성 요소

간단하고 반응이 빠른 필터 구성 요소로, 마이크로 인터랙션 스타일, 아날로그 색 구성표 및 어두운 테마 지원을 갖춘 소셜 미디어용 구성 요소입니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4">
  <div class="container mx-auto">
    <h2 class="text-xl font-bold mb-4">Filters</h2>
    <div class="flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:scale-105">
        Popular
      </button>
      <button class="px-4 py-2 bg-green-500 text-white rounded-full hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out transform hover:scale-105">
        Latest
      </button>
      <button class="px-4 py-2 bg-yellow-500 text-white rounded-full hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-800 transition duration-300 ease-in-out transform hover:scale-105">
        Following
      </button>
      <button class="px-4 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 transition duration-300 ease-in-out transform hover:scale-105">
        Friends
      </button>
    </div>
  </div>
</div>

관련 구성 요소

필터컴포넌트뉴모피즘

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

열다

필터 구성 요소

Tailwind CSS를 사용하여 다크 모드 UI를 위해 설계된 반응형 필터 컴포넌트입니다. 여기에는 콘텐츠를 필터링하고, 어두운 배경을 사용하고, 배터리 수명을 절약하는 옵션이 포함되어 있습니다.

열다

필터 구성 요소

Brutalism 스타일로 설계된 반응형 필터 구성 요소로, 대시보드 설정을 위한 회색조 색 구성표가 있습니다. 대화형 필터 옵션이 포함되어 있으며 어두운 테마를 지원합니다.

열다