필터 구성 요소
Tailwind CSS가 포함된 브루탈리스트 필터 컴포넌트로, 반응형 디자인, 어두운 테마 지원, 이미지 및 아바타에 대한 플레이스홀더를 특징으로 합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col gap-4">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Filters</h2>
<div class="flex flex-col gap-2">
<label class="block text-gray-700 dark:text-gray-300">Category:</label>
<select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
<option>All</option>
<option>Art</option>
<option>Photography</option>
<option>Music</option>
<option>Technology</option>
</select>
</div>
<div class="flex flex-col gap-2">
<label class="block text-gray-700 dark:text-gray-300">Price Range:</label>
<input type="range" min="0" max="100" class="border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg p-2" />
</div>
<div class="flex flex-col gap-2">
<label class="block text-gray-700 dark:text-gray-300">Rating:</label>
<select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
<option>All</option>
<option>1 Star</option>
<option>2 Stars</option>
<option>3 Stars</option>
<option>4 Stars</option>
<option>5 Stars</option>
</select>
</div>
<div class="flex justify-between">
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">Reset</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg">Apply Filters</button>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Users</h3>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
<div>
<h4 class="font-semibold">John Doe</h4>
<p class="text-gray-600 dark:text-gray-300">Photographer</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/80.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
<div>
<h4 class="font-semibold">Jane Smith</h4>
<p class="text-gray-600 dark:text-gray-300">Artist</p>
</div>
</div>
</div>
</div>
<div class="mt-4">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Works</h3>
<div class="grid grid-cols-1 gap-4">
<img src="https://picsum.photos/200/150?random=1" alt="Featured Work" class="rounded-lg shadow-md" />
<img src="https://picsum.photos/200/150?random=2" alt="Featured Work" class="rounded-lg shadow-md" />
<img src="https://picsum.photos/200/150?random=3" alt="Featured Work" class="rounded-lg shadow-md" />
</div>
</div>
</div>