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