フィルター コンポーネント
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>関連コンポーネント
フィルター コンポーネント
パステルカラーとダークモードのサポートを特徴とするglassmorphismスタイルで設計されたレスポンシブフィルターコンポーネントは、ビジネス/企業のWebサイトを対象としています。
フィルター コンポーネント
3Dデザイン要素とトライアドカラースキームを備えた複雑でレスポンシブなフィルターコンポーネントで、ブログ/コンテンツWebサイトに適しています。ダークテーマをサポートします。