필터 | Code Components Hub

필터 구성 요소

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

                <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>

필터 구성 요소

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

미리보기 열기

                <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>

필터 구성 요소

매력적인 마이크로 인터랙션과 트라이어딕 색 구성표를 갖춘 전자 상거래를 위한 반응형 필터 구성 요소로, 다크 모드를 지원합니다.

미리보기 열기

                <div class="flex flex-col p-6 space-y-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Filters</h2>
    <div class="space-y-4">
        <div class="flex items-center justify-between">
            <span class="text-lg text-gray-600 dark:text-gray-300">Category</span>
            <div class="flex space-x-3">
                <button class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300" aria-label="Select Electronics">Electronics</button>
                <button class="px-4 py-2 text-sm font-semibold text-white bg-green-600 rounded-lg hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all duration-300" aria-label="Select Clothing">Clothing</button>
                <button class="px-4 py-2 text-sm font-semibold text-white bg-purple-600 rounded-lg hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300" aria-label="Select Home Goods">Home Goods</button>
            </div>
        </div>
        <div>
            <label class="block text-gray-600 dark:text-gray-300" for="price">Price Range</label>
            <input type="range" min="0" max="100" class="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" id="price" aria-label="Price Range" />
        </div>
        <div>
            <label class="block text-gray-600 dark:text-gray-300">Brand</label>
            <select class="block w-full p-2 mt-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:border-gray-600 dark:focus:ring-blue-500" aria-label="Select Brand">
                <option>Brand A</option>
                <option>Brand B</option>
                <option>Brand C</option>
            </select>
        </div>
        <div>
            <p class="text-gray-600 dark:text-gray-300">Available Products:</p>
            <div class="grid grid-cols-3 gap-4 mt-4">
                <img src="https://picsum.photos/200/200" alt="Product Image 1" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
                <img src="https://picsum.photos/200/200?random=1" alt="Product Image 2" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
                <img src="https://picsum.photos/200/200?random=2" alt="Product Image 3" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
            </div>
        </div>
    </div>
</div>

필터 구성 요소

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

미리보기 열기

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-white mb-4">Filters</h2>
    <div class="grid grid-cols-2 gap-4">
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Date Range:</label>
            <input type="date" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
            <input type="date" class="p-2 mt-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">User:</label>
            <input type="text" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" placeholder="Search by user..." />
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Status:</label>
            <select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
                <option class="bg-gray-700 dark:bg-gray-800">All</option>
                <option class="bg-gray-700 dark:bg-gray-800">Active</option>
                <option class="bg-gray-700 dark:bg-gray-800">Inactive</option>
            </select>
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Category:</label>
            <select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
                <option class="bg-gray-700 dark:bg-gray-800">Select category...</option>
                <option class="bg-gray-700 dark:bg-gray-800">Category 1</option>
                <option class="bg-gray-700 dark:bg-gray-800">Category 2</option>
            </select>
        </div>
    </div>
    <button class="mt-4 p-2 bg-gray-600 hover:bg-gray-500 text-white rounded">Apply Filters</button>
</div>

필터 구성 요소

비즈니스/기업 웹사이트를 대상으로 파스텔 색상과 다크 모드 지원을 특징으로 하는 glassmorphism 스타일로 설계된 반응형 필터 구성 요소입니다.

미리보기 열기

                <div class="container mx-auto p-6">
    <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filter Options</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> 
            <div class="flex flex-col">
                <label class="text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
                <select id="category" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
                    <option>All</option>
                    <option>Consulting</option>
                    <option>Marketing</option>
                    <option>Development</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="text-gray-700 dark:text-gray-300 mb-2" for="location">Location</label>
                <select id="location" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
                    <option>Worldwide</option>
                    <option>Remote</option>
                    <option>On-site</option>
                </select>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="flex flex-col">
                <label class="text-gray-700 dark:text-gray-300 mb-2" for="date">Date</label>
                <input type="date" id="date" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
            </div>
            <div class="flex flex-col">
                <label class="text-gray-700 dark:text-gray-300 mb-2" for="price">Price</label>
                <input type="text" id="price" placeholder="Max Price" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
            </div>
        </div>
        <button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500">Apply Filters</button>
    </div>
</div>

필터 구성 요소

Glassmorphism 및 Analogous 색 구성표로 설계된 정교한 필터 구성 요소로, 어두운 테마를 지원하는 대시보드 데이터 시각화에 적합합니다.

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 p-6 dark:bg-gray-900">
    <div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-8 w-full max-w-4xl border border-gray-200 dark:bg-gray-800 dark:bg-opacity-60 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Filters</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Category</label>
                <select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
                    <option>All</option>
                    <option>Analytics</option>
                    <option>Marketing</option>
                    <option>Sales</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Status</label>
                <select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Pending</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Date Range</label>
                <div class="flex space-x-2">
                    <input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
                    <input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
                </div>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Search</label>
                <input type="text" placeholder="Search..." class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
            </div>
        </div>
        <div class="flex justify-between items-center mt-6">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md dark:bg-blue-500 dark:hover:bg-blue-600">Apply</button>
            <button class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md dark:bg-gray-600 dark:hover:bg-gray-700">Reset</button>
        </div>
    </div>
</div>

필터 구성 요소

3D 디자인 요소와 트라이어드 색 구성표가 있는 복잡하고 반응이 빠른 필터 구성 요소로, 블로그/콘텐츠 웹 사이트에 적합합니다. 어두운 테마를 지원합니다.

미리보기 열기

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Filter Content</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Categories</h3>
      <div class="space-y-3">
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-blue-500 dark:text-blue-400">
          Technology
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-red-500 dark:text-red-400">
          Travel
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-green-500 dark:text-green-400">
          Food
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-yellow-500 dark:text-yellow-400">
          Lifestyle
        </label>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Tags</h3>
      <div class="flex flex-wrap gap-2">
        <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-full text-sm">AI</span>
        <span class="px-3 py-1 bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-full text-sm">Adventure</span>
        <span class="px-3 py-1 bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-full text-sm">Recipes</span>
        <span class="px-3 py-1 bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-full text-sm">Minimalism</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Date Range</h3>
      <div class="space-y-4">
        <div>
          <label for="start-date" class="block text-gray-600 dark:text-gray-300 mb-2">Start Date</label>
          <input type="date" id="start-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
        </div>
        <div>
          <label for="end-date" class="block text-gray-600 dark:text-gray-300 mb-2">End Date</label>
          <input type="date" id="end-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
        </div>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center">
    <button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-full shadow-lg transform transition duration-300 hover:scale-110">Apply Filters</button>
  </div>
</div>

필터 구성 요소

반응형 디자인과 어두운 테마가 있는 미니멀리스트 필터 구성 요소는 Tailwind CSS를 사용합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
  <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Filters</h3>
  <div class="flex flex-col space-y-2">
    <div class="flex items-center justify-between">
      <label for="category" class="text-gray-700 dark:text-gray-300">Category:</label>
      <select id="category" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
        <option value="all">All</option>
        <option value="electronics">Electronics</option>
        <option value="books">Books</option>
        <option value="clothing">Clothing</option>
      </select>
    </div>
    <div class="flex items-center justify-between">
      <label for="price" class="text-gray-700 dark:text-gray-300">Max Price:</label>
      <input type="range" id="price" min="0" max="1000" value="1000" class="w-full ml-4">
    </div>
    <div class="flex items-center justify-between">
      <label for="sort" class="text-gray-700 dark:text-gray-300">Sort By:</label>
      <select id="sort" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
        <option value="newest">Newest</option>
        <option value="price-low-high">Price: Low to High</option>
        <option value="price-high-low">Price: High to Low</option>
      </select>
    </div>
  </div>
  <button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Apply Filters</button>
</div>

필터 구성 요소

Tailwind CSS를 사용하여 마이크로 인터랙션, 매력적인 애니메이션 및 어두운 테마를 지원하는 반응형 필터 구성 요소입니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-6">
    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Filters</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="relative">
            <input type="text" placeholder="Search..." class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out" />
        </div>
        <div class="relative">
            <select class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out">
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
    </div>
    <div class="flex items-center space-x-4">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Apply</button>
        <button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-150 ease-in-out">Reset</button>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/200/100?random=1" alt="placeholder image" class="w-full h-20 object-cover" />
            <div class="p-4">
                <h3 class="text-gray-900 dark:text-white font-bold">Item 1</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Item 1</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
            <img src="https://picsum.photos/200/100?random=2" alt="placeholder image" class="w-full h-20 object-cover" />
            <div class="p-4">
                <h3 class="text-gray-900 dark:text-white font-bold">Item 2</h3>
                <p class="text-gray-600 dark:text-gray-300">Description of Item 2</p>
            </div>
        </div>
    </div>
</div>

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

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

미리보기 열기

                <div class='bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white p-6 max-w-sm mx-auto font-mono'>

카테고리

필터