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

필터 구성 요소

스큐어모픽 스타일 필터 구성 요소는 그레이스케일 색 구성표와 어두운 테마를 지원하는 반응형 디자인을 가진 대시보드용으로 설계되었습니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
    <h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold mb-4">Filters</h2>
    <form class="flex flex-col space-y-4">
        <div class="flex items-center">
            <label for="search" class="text-gray-700 dark:text-gray-300 mr-2">Search:</label>
            <input type="text" id="search" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" placeholder="Search..." />
        </div>
        <div class="flex items-center">
            <label for="category" class="text-gray-700 dark:text-gray-300 mr-2">Category:</label>
            <select id="category" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500">
                <option>All</option>
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
        <div class="flex items-center">
            <label for="date" class="text-gray-700 dark:text-gray-300 mr-2">Date:</label>
            <input type="date" id="date" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" />
        </div>
        <button type="submit" class="bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-200 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500 transition">Apply Filters</button>
    </form>
</div>

관련 구성 요소

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

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

열다

필터 구성 요소

전자 상거래를 위한 미니멀하고 반응이 빠른 필터 구성 요소이며 어두운 테마를 지원합니다. 여기에는 카테고리, 가격대 및 색상 필터가 포함됩니다.

열다

필터컴포넌트뉴모피즘

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

열다