HTML 代码
<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md transition-all duration-300">
<h2 class="text-xl font-semibold mb-4">Filters</h2>
<div class="flex flex-col md:flex-row md:space-x-4 mb-4">
<input type="text" placeholder="Search..." class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300" />
<select class="border rounded-lg p-2 focus:outline-none focus:ring focus:ring-purple-500 dark:bg-gray-900 dark:border-gray-600 transition duration-300">
<option value="">Select Category</option>
<option value="category1">Category 1</option>
<option value="category2">Category 2</option>
</select>
<button class="bg-purple-500 text-white rounded-lg p-2 hover:bg-purple-600 transition duration-300 dark:bg-purple-700 dark:hover:bg-purple-600">Apply</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
<h3 class="text-lg font-medium">Filter Item 1</h3>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
<h3 class="text-lg font-medium">Filter Item 2</h3>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg shadow transition duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md mb-2" />
<h3 class="text-lg font-medium">Filter Item 3</h3>
</div>
</div>
<div class="mt-4">
<p class="text-sm text-gray-600 dark:text-gray-400">Using filters can help narrow down your search results based on your preferences!</p>
</div>
</div>