필터 구성 요소

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

미리 보기

HTML 코드

<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold mb-4">Filters</h2>
    <form>
        <div class="mb-4">
            <label for="category" class="block text-sm font-medium mb-2">Category</label>
            <select id="category" class="bg-gray-700 text-white border border-gray-600 rounded-md p-2 w-full">
                <option>All</option>
                <option>Technology</option>
                <option>Health</option>
                <option>Education</option>
                <option>Fashion</option>
            </select>
        </div>
        <div class="mb-4">
            <label for="price-range" class="block text-sm font-medium mb-2">Price Range</label>
            <input type="range" id="price-range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium mb-2">Rating</label>
            <div class="flex space-x-1">
                <input type="radio" id="star5" name="rating" value="5" class="hidden">
                <label for="star5" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star4" name="rating" value="4" class="hidden">
                <label for="star4" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star3" name="rating" value="3" class="hidden">
                <label for="star3" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star2" name="rating" value="2" class="hidden">
                <label for="star2" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star1" name="rating" value="1" class="hidden">
                <label for="star1" class="cursor-pointer text-yellow-500">★</label>
            </div>
        </div>
        <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 rounded">Apply Filters</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold mb-2">Featured Items</h3>
        <div class="grid grid-cols-1 gap-4">
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=1" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=2" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=3" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
        </div>
    </div>
</div>

필터 구성 요소

미리 보기

HTML 코드

관련 구성 요소

필터컴포넌트

필터 구성 요소

필터 구성 요소