Search Components

Filters

Tools to help users filter content

Filters Component

A simple Filters Component designed for a blog or content consumption website, following a dark mode UI with a monochromatic color scheme. It features a responsive layout with minimal elements.

Open Preview

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

Glassmorphism Filters Component for Social Media with responsive design and dark theme support.

Open Preview

                ```html
<div class="flex flex-col md:flex-row items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 w-full max-w-sm md:max-w-md lg:max-w-lg">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
    <div class="space-y-4">
      <div>
        <label for="category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
        <select id="category" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-pink-500 focus:border-pink-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
          <option>All</option>
          <option>Photos</option>
          <option>Videos</option>
          <option>Articles</option>
        </select>
      </div>
      <div>
        <label for="sort" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Sort By</label>
        <select id="sort" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-purple-500 focus:border-purple-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
          <option>Newest</option>
          <option>Popular</option>
          <option>Trending</option>
        </select>
      </div>
      <div>
        <label for="date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date Range</label>
        <input type="date" id="date" class="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-200">
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tags</label>
        <div class="mt-2 flex flex-wrap gap-2">
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100">#travel</span>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">#food</span>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">#nature</span>
          <span class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">#technology</span>
        </div>
      </div>
      <div class="flex items-center">
        <input id="darkMode" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
        <label for="darkMode" class="ml-2 block text-sm text-gray-900 dark:text-gray-200">Enable Dark Mode</label>
      </div>
    </div>
    <div class="mt-6">
      <button class="w-full inline-flex items-center justify-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-pink-500 hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-500">
        Apply Filters
      </button>
    </div>
  </div>
</div>

```

Filters Component

A skeuomorphic style filters component designed for dashboards with a grayscale color scheme and responsive design with dark theme support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-md">
    <h2 class="text-gray-900 dark:text-gray-100 text-lg font-bold mb-4">Filters</h2>
    <form class="flex flex-col space-y-4">
        <div class="flex items-center">
            <label for="search" class="text-gray-700 dark:text-gray-300 mr-2">Search:</label>
            <input type="text" id="search" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" placeholder="Search..." />
        </div>
        <div class="flex items-center">
            <label for="category" class="text-gray-700 dark:text-gray-300 mr-2">Category:</label>
            <select id="category" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500">
                <option>All</option>
                <option>Category 1</option>
                <option>Category 2</option>
                <option>Category 3</option>
            </select>
        </div>
        <div class="flex items-center">
            <label for="date" class="text-gray-700 dark:text-gray-300 mr-2">Date:</label>
            <input type="date" id="date" class="flex-1 p-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500" />
        </div>
        <button type="submit" class="bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-800 rounded-lg py-2 hover:bg-gray-700 dark:hover:bg-gray-200 focus:outline-none focus:ring focus:ring-gray-400 dark:focus:ring-gray-500 transition">Apply Filters</button>
    </form>
</div>

Filters Component

A simple, responsive Filters Component for social media with a Microinteractions style, Analogous color scheme, and dark theme support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4">
  <div class="container mx-auto">
    <h2 class="text-xl font-bold mb-4">Filters</h2>
    <div class="flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out transform hover:scale-105">
        Popular
      </button>
      <button class="px-4 py-2 bg-green-500 text-white rounded-full hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-300 ease-in-out transform hover:scale-105">
        Latest
      </button>
      <button class="px-4 py-2 bg-yellow-500 text-white rounded-full hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-800 transition duration-300 ease-in-out transform hover:scale-105">
        Following
      </button>
      <button class="px-4 py-2 bg-red-500 text-white rounded-full hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 transition duration-300 ease-in-out transform hover:scale-105">
        Friends
      </button>
    </div>
  </div>
</div>

Filters Component

A responsive filters component for e-commerce with engaging microinteractions and a triadic color scheme, supporting dark mode.

Open Preview

                <div class="flex flex-col p-6 space-y-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Filters</h2>
    <div class="space-y-4">
        <div class="flex items-center justify-between">
            <span class="text-lg text-gray-600 dark:text-gray-300">Category</span>
            <div class="flex space-x-3">
                <button class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all duration-300" aria-label="Select Electronics">Electronics</button>
                <button class="px-4 py-2 text-sm font-semibold text-white bg-green-600 rounded-lg hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-green-500 transition-all duration-300" aria-label="Select Clothing">Clothing</button>
                <button class="px-4 py-2 text-sm font-semibold text-white bg-purple-600 rounded-lg hover:bg-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all duration-300" aria-label="Select Home Goods">Home Goods</button>
            </div>
        </div>
        <div>
            <label class="block text-gray-600 dark:text-gray-300" for="price">Price Range</label>
            <input type="range" min="0" max="100" class="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" id="price" aria-label="Price Range" />
        </div>
        <div>
            <label class="block text-gray-600 dark:text-gray-300">Brand</label>
            <select class="block w-full p-2 mt-2 bg-gray-100 dark:bg-gray-700 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-600 dark:border-gray-600 dark:focus:ring-blue-500" aria-label="Select Brand">
                <option>Brand A</option>
                <option>Brand B</option>
                <option>Brand C</option>
            </select>
        </div>
        <div>
            <p class="text-gray-600 dark:text-gray-300">Available Products:</p>
            <div class="grid grid-cols-3 gap-4 mt-4">
                <img src="https://picsum.photos/200/200" alt="Product Image 1" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
                <img src="https://picsum.photos/200/200?random=1" alt="Product Image 2" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
                <img src="https://picsum.photos/200/200?random=2" alt="Product Image 3" class="w-full h-full rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105" />
            </div>
        </div>
    </div>
</div>

Filters Component

A responsive filters component designed in Brutalism style with a grayscale color scheme for a dashboard setting. It includes interactive filter options and supports dark theme.

Open Preview

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-white mb-4">Filters</h2>
    <div class="grid grid-cols-2 gap-4">
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Date Range:</label>
            <input type="date" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
            <input type="date" class="p-2 mt-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" />
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">User:</label>
            <input type="text" class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white" placeholder="Search by user..." />
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Status:</label>
            <select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
                <option class="bg-gray-700 dark:bg-gray-800">All</option>
                <option class="bg-gray-700 dark:bg-gray-800">Active</option>
                <option class="bg-gray-700 dark:bg-gray-800">Inactive</option>
            </select>
        </div>
        <div class="flex flex-col">
            <label class="text-gray-300 dark:text-gray-400 mb-2">Category:</label>
            <select class="p-2 border border-gray-600 rounded bg-gray-700 dark:bg-gray-800 text-white">
                <option class="bg-gray-700 dark:bg-gray-800">Select category...</option>
                <option class="bg-gray-700 dark:bg-gray-800">Category 1</option>
                <option class="bg-gray-700 dark:bg-gray-800">Category 2</option>
            </select>
        </div>
    </div>
    <button class="mt-4 p-2 bg-gray-600 hover:bg-gray-500 text-white rounded">Apply Filters</button>
</div>

Filters Component

A responsive Filters Component designed with a glassmorphism style, featuring pastel colors and dark mode support, aimed at business/corporate websites.

Open Preview

                <div class="container mx-auto p-6">
    <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filter Options</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> 
            <div class="flex flex-col">
                <label class="text-gray-700 dark:text-gray-300 mb-2" for="category">Category</label>
                <select id="category" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
                    <option>All</option>
                    <option>Consulting</option>
                    <option>Marketing</option>
                    <option>Development</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="text-gray-700 dark:text-gray-300 mb-2" for="location">Location</label>
                <select id="location" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
                    <option>Worldwide</option>
                    <option>Remote</option>
                    <option>On-site</option>
                </select>
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
            <div class="flex flex-col">
                <label class="text-gray-700 dark:text-gray-300 mb-2" for="date">Date</label>
                <input type="date" id="date" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
            </div>
            <div class="flex flex-col">
                <label class="text-gray-700 dark:text-gray-300 mb-2" for="price">Price</label>
                <input type="text" id="price" placeholder="Max Price" class="p-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring focus:ring-blue-300">
            </div>
        </div>
        <button class="mt-4 w-full bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 rounded-lg hover:bg-blue-600 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500">Apply Filters</button>
    </div>
</div>

Filters Component

A sophisticated filters component designed with Glassmorphism and an Analogous color scheme, suitable for dashboard data visualization with dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-800 p-6 dark:bg-gray-900">
    <div class="bg-white bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-8 w-full max-w-4xl border border-gray-200 dark:bg-gray-800 dark:bg-opacity-60 dark:border-gray-700">
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">Filters</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Category</label>
                <select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
                    <option>All</option>
                    <option>Analytics</option>
                    <option>Marketing</option>
                    <option>Sales</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Status</label>
                <select class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
                    <option>Active</option>
                    <option>Inactive</option>
                    <option>Pending</option>
                </select>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Date Range</label>
                <div class="flex space-x-2">
                    <input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
                    <input type="date" class="bg-transparent border rounded-md p-2 w-1/2 text-gray-900 dark:text-gray-200">
                </div>
            </div>
            <div class="flex flex-col">
                <label class="mb-1 text-gray-700 dark:text-gray-300">Search</label>
                <input type="text" placeholder="Search..." class="bg-transparent border rounded-md p-2 text-gray-900 dark:text-gray-200">
            </div>
        </div>
        <div class="flex justify-between items-center mt-6">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md dark:bg-blue-500 dark:hover:bg-blue-600">Apply</button>
            <button class="bg-gray-400 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-md dark:bg-gray-600 dark:hover:bg-gray-700">Reset</button>
        </div>
    </div>
</div>

Filters Component

A complex and responsive Filters Component with 3D design elements and a triadic color scheme, suitable for blog/content websites. Supports dark theme.

Open Preview

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white">Filter Content</h2>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Categories</h3>
      <div class="space-y-3">
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-blue-500 dark:text-blue-400">
          Technology
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-red-500 dark:text-red-400">
          Travel
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-green-500 dark:text-green-400">
          Food
        </label>
        <label class="flex items-center text-gray-600 dark:text-gray-300">
          <input type="checkbox" class="form-checkbox mr-2 text-yellow-500 dark:text-yellow-400">
          Lifestyle
        </label>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Tags</h3>
      <div class="flex flex-wrap gap-2">
        <span class="px-3 py-1 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded-full text-sm">AI</span>
        <span class="px-3 py-1 bg-red-200 dark:bg-red-700 text-red-800 dark:text-red-200 rounded-full text-sm">Adventure</span>
        <span class="px-3 py-1 bg-green-200 dark:bg-green-700 text-green-800 dark:text-green-200 rounded-full text-sm">Recipes</span>
        <span class="px-3 py-1 bg-yellow-200 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-200 rounded-full text-sm">Minimalism</span>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-2xl p-6 transform transition duration-500 hover:scale-105">
      <h3 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200">Date Range</h3>
      <div class="space-y-4">
        <div>
          <label for="start-date" class="block text-gray-600 dark:text-gray-300 mb-2">Start Date</label>
          <input type="date" id="start-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
        </div>
        <div>
          <label for="end-date" class="block text-gray-600 dark:text-gray-300 mb-2">End Date</label>
          <input type="date" id="end-date" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white">
        </div>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center">
    <button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-full shadow-lg transform transition duration-300 hover:scale-110">Apply Filters</button>
  </div>
</div>

Filters Component

A minimalist filter component with responsive design and dark theme support using Tailwind CSS.

Open Preview

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