Filters Component

<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4">
  <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Filters</h3>
  <div class="flex flex-col space-y-2">
    <div class="flex items-center justify-between">
      <label for="category" class="text-gray-700 dark:text-gray-300">Category:</label>
      <select id="category" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
        <option value="all">All</option>
        <option value="electronics">Electronics</option>
        <option value="books">Books</option>
        <option value="clothing">Clothing</option>
      </select>
    </div>
    <div class="flex items-center justify-between">
      <label for="price" class="text-gray-700 dark:text-gray-300">Max Price:</label>
      <input type="range" id="price" min="0" max="1000" value="1000" class="w-full ml-4">
    </div>
    <div class="flex items-center justify-between">
      <label for="sort" class="text-gray-700 dark:text-gray-300">Sort By:</label>
      <select id="sort" class="border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200">
        <option value="newest">Newest</option>
        <option value="price-low-high">Price: Low to High</option>
        <option value="price-high-low">Price: High to Low</option>
      </select>
    </div>
  </div>
  <button class="mt-6 w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-700">Apply Filters</button>
</div>