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