フィルター コンポーネント
グレースケールの配色とダークテーマをサポートするレスポンシブデザインのダッシュボード用に設計されたスキューモーフィックスタイルのフィルターコンポーネント。
HTMLコード
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
<h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold mb-4">Filters</h2>
<form class="flex flex-col space-y-4">
<div class="flex items-center">
<label for="search" class="text-gray-700 dark:text-gray-300 mr-2">Search:</label>
<input type="text" id="search" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" placeholder="Search..." />
</div>
<div class="flex items-center">
<label for="category" class="text-gray-700 dark:text-gray-300 mr-2">Category:</label>
<select id="category" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500">
<option>All</option>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
</select>
</div>
<div class="flex items-center">
<label for="date" class="text-gray-700 dark:text-gray-300 mr-2">Date:</label>
<input type="date" id="date" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" />
</div>
<button type="submit" class="bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-200 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500 transition">Apply Filters</button>
</form>
</div>関連コンポーネント
フィルター コンポーネント
複雑で応答性の高いGlassmorphismスタイルのフィルターコンポーネントで、ビジネス/企業のWebサイト向けの類似の配色を備えています。半透明の要素とぼかし効果が特徴で、Tailwind CSS を使用した完全なダーク モードがサポートされています。JavaScriptは含まれていません。
フィルター コンポーネント
Tailwind CSS を使用したダークモード UI 用に設計されたレスポンシブ フィルター コンポーネント。コンテンツをフィルタリングするオプション、暗い背景を使用するオプション、バッテリー寿命を節約するオプションが含まれています。