フィルター コンポーネント
マイクロインタラクション、魅力的なアニメーション、Tailwind CSS を使用したダークテーマのサポートを備えたレスポンシブ フィルター コンポーネント。
HTMLコード
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 space-y-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-white">Filters</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="relative">
<input type="text" placeholder="Search..." class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out" />
</div>
<div class="relative">
<select class="block w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200 rounded-md py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition duration-150 ease-in-out">
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
</select>
</div>
</div>
<div class="flex items-center space-x-4">
<button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md hover:bg-blue-600 dark:hover:bg-blue-600 transition duration-150 ease-in-out">Apply</button>
<button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-md hover:bg-gray-400 dark:hover:bg-gray-500 transition duration-150 ease-in-out">Reset</button>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="placeholder image" class="w-full h-20 object-cover" />
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-bold">Item 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Item 1</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-md overflow-hidden shadow transition duration-150 ease-in-out hover:shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="placeholder image" class="w-full h-20 object-cover" />
<div class="p-4">
<h3 class="text-gray-900 dark:text-white font-bold">Item 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of Item 2</p>
</div>
</div>
</div>
</div>関連コンポーネント
Retro_Vintage_Earth_Tones_Filters_Component
適度な複雑さは、レトロ/ビンテージの美学とアースカラーのコンポーネントをフィルタリングし、ダッシュボードに適しています。レスポンシブデザインとダークモードのサポートが特徴です。
Bauhaus_EarthTone_Agriculture_Filters_Component
農業/農業Webサイト用の複雑でレスポンシブなフィルターコンポーネントで、アースカラーのバウハウススタイルで設計されています。カテゴリ、価格帯、評価、人気のあるタグなどのさまざまなフィルタリングオプションが含まれており、ダークモードが完全にサポートされています。