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>

관련 구성 요소

레트로 메디컬 필터구성 요소

헬스케어 애플리케이션을 위한 반응형 레트로/빈티지 스타일 필터 구성 요소로, 가을 색상과 다크 모드를 지원합니다. 여기에는 범주, 날짜 범위 및 상태에 대한 대화형 필터 옵션이 포함되어 있습니다.

열다

Retro_Vintage_Earth_Tones_Filters_Component

중간 정도의 복잡성은 대시보드에 적합한 레트로/빈티지 미학과 흙색을 가진 구성 요소를 필터링합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

열다

필터컴포넌트

어두운 테마를 지원하는 전자 상거래 애플리케이션을 위해 Material Design 스타일로 설계된 반응형 필터 구성 요소입니다. 향상된 쇼핑 경험을 위한 여러 대화형 요소가 포함되어 있습니다.

열다