Search Components

Filters

Tools to help users filter content

Filters Component

A responsive Filters Component with microinteractions, engaging animations, and dark theme support using Tailwind CSS.

                <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>

A brutalist-style filters component with high contrast, bold typography, and unusual spacing. It includes checkboxes, radio buttons, and a price range slider. Responsive effects are achieved through media queries and fluid units. Dark mode is supported via CSS.

Open Preview

                <div class='bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white p-6 max-w-sm mx-auto font-mono'>

Filters Component

A responsive Filters Component styled in Retro/Vintage design, supporting dark theme with Tailwind CSS.

Open Preview

                <div class="container mx-auto p-6 bg-white dark:bg-gray-800 rounded-md shadow-lg">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-6">Filters</h2>
    <div class="flex flex-col md:flex-row md:justify-around mb-4">
        <div class="filter-item mb-4 md:mb-0">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
            <select id="category" class="form-select block w-full px-3 py-2 text-gray-700 bg-gray-200 dark:bg-gray-700 dark:text-gray-300 border border-gray-300 rounded-md focus:ring focus:ring-indigo-200">
                <option>All</option>
                <option>Electronics</option>
                <option>Fashion</option>
                <option>Home & Garden</option>
            </select>
        </div>
        <div class="filter-item mb-4 md:mb-0">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="price">Price Range</label>
            <input type="range" id="price" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50" />
        </div>
    </div>
    <div class="flex flex-col md:flex-row md:justify-between mb-6">
        <div class="filter-item mb-4 md:mb-0">
            <label class="inline-flex items-center text-gray-700 dark:text-gray-300">
                <input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
                <span class="ml-2">In Stock</span>
            </label>
        </div>
        <div class="filter-item mb-4 md:mb-0">
            <label class="inline-flex items-center text-gray-700 dark:text-gray-300">
                <input type="checkbox" class="form-checkbox text-indigo-600 h-5 w-5" />
                <span class="ml-2">Free Shipping</span>
            </label>
        </div>
    </div>
    <div class="text-center">
        <button class="bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring focus:ring-indigo-200">Apply Filters</button>
    </div>
    <div class="mt-8">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Results</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 1</h4>
                <img src="https://picsum.photos/200/150?random=1" alt="Item 1" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 1.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$49.99</span>
                </div>
            </div>
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 2</h4>
                <img src="https://picsum.photos/200/150?random=2" alt="Item 2" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 2.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$29.99</span>
                </div>
            </div>
            <div class="result-item bg-gray-100 dark:bg-gray-700 rounded-md p-4 shadow">
                <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Item Name 3</h4>
                <img src="https://picsum.photos/200/150?random=3" alt="Item 3" class="rounded-md w-full" />
                <p class="text-gray-600 dark:text-gray-300">Description of item 3.</p>
                <div class="text-right mt-2">
                    <span class="text-gray-800 dark:text-gray-200 font-bold">$19.99</span>
                </div>
            </div>
        </div>
    </div>
</div>

Filters Component

A responsive filters component designed with microinteractions and optimized for dark theme support.

Open Preview

                <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>

Filters Component

A Filters Component designed with a skeuomorphic style, featuring responsive effects and dark theme support. This component uses Tailwind CSS for styling and includes random placeholder images and avatars.

Open Preview

                <div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
  <h2 class="text-gray-800 dark:text-gray-200 text-2xl font-semibold mb-4">Filters</h2>
  <div class="space-y-4">
    <div class="flex items-center">
      <input type="checkbox" id="filter1" class="w-4 h-4 text-green-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-green-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-green-600" />
      <label for="filter1" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 1</label>
    </div>
    <div class="flex items-center">
      <input type="checkbox" id="filter2" class="w-4 h-4 text-blue-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-blue-600" />
      <label for="filter2" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 2</label>
    </div>
    <div class="flex items-center">
      <input type="checkbox" id="filter3" class="w-4 h-4 text-red-500 bg-gray-200 border-gray-300 rounded focus:ring-2 focus:ring-red-500 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-red-600" />
      <label for="filter3" class="ml-2 text-gray-800 dark:text-gray-200">Filter Option 3</label>
    </div>
  </div>
  <div class="mt-6">
    <button class="w-full text-white bg-blue-500 hover:bg-blue-700 rounded-lg p-2 text-center transition duration-300 ease-in-out dark:bg-blue-700 dark:hover:bg-blue-600">Apply Filters</button>
  </div>
  <div class="mt-4">
    <img src="https://picsum.photos/400/200?random=1" alt="Random Image" class="rounded-lg shadow-md" />
    <img src="https://picsum.photos/400/200?random=2" alt="Random Image" class="rounded-lg shadow-md mt-4" />
  </div>
  <div class="flex justify-between items-center mt-4">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow-lg" />
    <span class="text-gray-800 dark:text-gray-200">User Name</span>
  </div>
</div>

Filters Component

A Brutalist Filters Component with Tailwind CSS, featuring a responsive design, dark theme support, and placeholders for images and avatars.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col gap-4">
  <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Filters</h2>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Category:</label>
    <select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      <option>All</option>
      <option>Art</option>
      <option>Photography</option>
      <option>Music</option>
      <option>Technology</option>
    </select>
  </div>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Price Range:</label>
    <input type="range" min="0" max="100" class="border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-lg p-2" />
  </div>
  <div class="flex flex-col gap-2">
    <label class="block text-gray-700 dark:text-gray-300">Rating:</label>
    <select class="border-2 border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      <option>All</option>
      <option>1 Star</option>
      <option>2 Stars</option>
      <option>3 Stars</option>
      <option>4 Stars</option>
      <option>5 Stars</option>
    </select>
  </div>
  <div class="flex justify-between">
    <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg">Reset</button>
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg">Apply Filters</button>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Users</h3>
    <div class="grid grid-cols-2 gap-4">
      <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
        <div>
          <h4 class="font-semibold">John Doe</h4>
          <p class="text-gray-600 dark:text-gray-300">Photographer</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/women/80.jpg" alt="User Avatar" class="w-12 h-12 rounded-full" />
        <div>
          <h4 class="font-semibold">Jane Smith</h4>
          <p class="text-gray-600 dark:text-gray-300">Artist</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100">Featured Works</h3>
    <div class="grid grid-cols-1 gap-4">
      <img src="https://picsum.photos/200/150?random=1" alt="Featured Work" class="rounded-lg shadow-md" />
      <img src="https://picsum.photos/200/150?random=2" alt="Featured Work" class="rounded-lg shadow-md" />
      <img src="https://picsum.photos/200/150?random=3" alt="Featured Work" class="rounded-lg shadow-md" />
    </div>
  </div>
</div>

Filters Component

A responsive Filters Component designed for dark mode UI using Tailwind CSS. It includes options to filter content, uses dark backgrounds, and saves battery life.

Open Preview

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-xl font-bold mb-4">Filters</h2>
    <form>
        <div class="mb-4">
            <label for="category" class="block text-sm font-medium mb-2">Category</label>
            <select id="category" class="bg-gray-700 text-white border border-gray-600 rounded-md p-2 w-full">
                <option>All</option>
                <option>Technology</option>
                <option>Health</option>
                <option>Education</option>
                <option>Fashion</option>
            </select>
        </div>
        <div class="mb-4">
            <label for="price-range" class="block text-sm font-medium mb-2">Price Range</label>
            <input type="range" id="price-range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
        </div>
        <div class="mb-4">
            <label class="block text-sm font-medium mb-2">Rating</label>
            <div class="flex space-x-1">
                <input type="radio" id="star5" name="rating" value="5" class="hidden">
                <label for="star5" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star4" name="rating" value="4" class="hidden">
                <label for="star4" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star3" name="rating" value="3" class="hidden">
                <label for="star3" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star2" name="rating" value="2" class="hidden">
                <label for="star2" class="cursor-pointer text-yellow-500">★</label>
                <input type="radio" id="star1" name="rating" value="1" class="hidden">
                <label for="star1" class="cursor-pointer text-yellow-500">★</label>
            </div>
        </div>
        <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 rounded">Apply Filters</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold mb-2">Featured Items</h3>
        <div class="grid grid-cols-1 gap-4">
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=1" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=2" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
            <div class="bg-gray-700 rounded-lg p-4 shadow">
                <img src="https://picsum.photos/200/150?random=3" alt="Random Item" class="mb-2 rounded-md">
                <h4 class="font-bold">Item Title</h4>
                <p class="text-sm">Description of the item.</p>
            </div>
        </div>
    </div>
</div>

Search Components

Categories

Filters

Filters Component

BrutalistFiltersComponent

Filters Component

Filters Component

Filters Component

Filters Component

Filters Component