필터 구성 요소
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>