フィルター コンポーネント
パステルカラーとダークモードのサポートを特徴とするglassmorphismスタイルで設計されたレスポンシブフィルターコンポーネントは、ビジネス/企業のWebサイトを対象としています。
HTMLコード
<div class="container mx-auto p-6">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filter Options</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
<select id="category" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
<option>All</option>
<option>Consulting</option>
<option>Marketing</option>
<option>Development</option>
</select>
</div>
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="location">Location</label>
<select id="location" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
<option>Worldwide</option>
<option>Remote</option>
<option>On-site</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="date">Date</label>
<input type="date" id="date" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
</div>
<div class="flex flex-col">
<label class="text-gray-700 dark:text-gray-300 mb-2" for="price">Price</label>
<input type="text" id="price" placeholder="Max Price" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
</div>
</div>
<button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500">Apply Filters</button>
</div>
</div>
関連コンポーネント
フィルターコンポーネントニューモーフィズム
NeumorphismソフトUIでスタイル設定されたシンプルなレスポンシブフィルターコンポーネントで、グレースケールの配色を使用して、ビジネス/企業のWebサイト向けに設計されています。このコンポーネントはダークモードをサポートし、JavaScriptを使用せずにTailwind CSSで構築されています。