フィルター コンポーネント
現実世界のコントロールを模倣したスキューモーフィック スタイルで設計されたフィルター コンポーネントは、グレースケールの配色を利用しており、複雑なインタラクティブ要素を持つダッシュボードに最適です。
HTMLコード
<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
<div class="flex flex-col space-y-4">
<div class="flex items-center">
<label for="search" class="text-gray-600 dark:text-gray-300 w-1/3">Search:</label>
<input id="search" type="text" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" placeholder="Search..." />
</div>
<div class="flex items-center">
<label for="date" class="text-gray-600 dark:text-gray-300 w-1/3">Date:</label>
<input id="date" type="date" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" />
</div>
<div class="flex items-center">
<label for="category" class="text-gray-600 dark:text-gray-300 w-1/3">Category:</label>
<select id="category" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring 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 class="text-gray-600 dark:text-gray-300 w-1/3">Status:</label>
<div class="flex items-center space-x-4 w-2/3">
<label class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
<span class="ml-2 text-gray-800 dark:text-gray-200">Active</span>
</label>
<label class="flex items-center">
<input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
<span class="ml-2 text-gray-800 dark:text-gray-200">Inactive</span>
</label>
</div>
</div>
<button class="bg-gray-600 dark:bg-gray-400 text-white rounded-lg p-2 hover:bg-gray-700 dark:hover:bg-gray-500 transition duration-200">Apply Filters</button>
</div>
</div>関連コンポーネント
フィルターコンポーネントニューモーフィズム
NeumorphismソフトUIでスタイル設定されたシンプルなレスポンシブフィルターコンポーネントで、グレースケールの配色を使用して、ビジネス/企業のWebサイト向けに設計されています。このコンポーネントはダークモードをサポートし、JavaScriptを使用せずにTailwind CSSで構築されています。
フィルター コンポーネント
ブログやコンテンツ消費ウェブサイト向けに設計されたシンプルなフィルターコンポーネントで、単色のカラースキームのダークモードUIに従います。最小限の要素を備えたレスポンシブレイアウトが特徴です。
BrutalistFiltersコンポーネント
ブルータリズムスタイルのフィルターコンポーネントで、高コントラスト、大胆なタイポグラフィ、珍しいスペースが特徴です。これには、チェックボックス、ラジオボタン、価格帯スライダーが含まれています。レスポンシブ効果は、メディアクエリと流体ユニットによって実現されます。ダークモードはCSSでサポートされています。