フィルター コンポーネント
ブログやコンテンツ消費ウェブサイト向けに設計されたシンプルなフィルターコンポーネントで、単色のカラースキームのダークモードUIに従います。最小限の要素を備えたレスポンシブレイアウトが特徴です。
HTMLコード
<div class="bg-gray-800 dark:bg-gray-900 p-5 rounded-md shadow-lg max-w-md mx-auto">
<h2 class="text-white text-lg font-semibold mb-4">Filters</h2>
<div class="mb-4">
<label for="category" class="text-gray-300 dark:text-gray-400">Category</label>
<select id="category" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
<option>All</option>
<option>Technology</option>
<option>Health</option>
<option>Lifestyle</option>
<option>Travel</option>
</select>
</div>
<div class="mb-4">
<label for="author" class="text-gray-300 dark:text-gray-400">Author</label>
<select id="author" class="bg-gray-700 dark:bg-gray-800 text-white border border-gray-600 rounded-md w-full p-2 mt-1">
<option>All</option>
<option>John Doe</option>
<option>Jane Smith</option>
<option>Chris Johnson</option>
</select>
</div>
<div class="mb-4">
<label class="text-gray-300 dark:text-gray-400">Sort By</label>
<div class="flex space-x-4 mt-1">
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-blue-500" name="sort" value="latest">
<span class="ml-2 text-white">Latest</span>
</label>
<label class="inline-flex items-center">
<input type="radio" class="form-radio text-blue-500" name="sort" value="popular">
<span class="ml-2 text-white">Popular</span>
</label>
</div>
</div>
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md">Apply Filters</button>
</div>関連コンポーネント
フィルター コンポーネント
複雑で応答性の高いGlassmorphismスタイルのフィルターコンポーネントで、ビジネス/企業のWebサイト向けの類似の配色を備えています。半透明の要素とぼかし効果が特徴で、Tailwind CSS を使用した完全なダーク モードがサポートされています。JavaScriptは含まれていません。
フィルター コンポーネント
パステルカラーとダークモードのサポートを特徴とするglassmorphismスタイルで設計されたレスポンシブフィルターコンポーネントは、ビジネス/企業のWebサイトを対象としています。