Search Components

Filters

Tools to help users filter content

Glassmorphism Filters Component

A simple, responsive Glassmorphism-styled filters component for a portfolio, featuring frosted glass-like translucent elements with blur effects, complementary colors, and dark mode support.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-blue-100 to-indigo-200 p-4 dark:from-gray-900 dark:to-gray-800 flex items-center justify-center">
  <div class="w-full max-w-sm mx-auto p-4 md:p-6 lg:p-8 rounded-xl backdrop-filter backdrop-blur-lg bg-white bg-opacity-20 border border-t-white border-l-white border-opacity-30 shadow-lg dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-700 dark:border-opacity-50">
    <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6 text-center dark:text-white drop-shadow-sm">Filter Projects</h2>
    <div class="flex flex-wrap gap-3 justify-center mb-6">
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-blue-500 bg-opacity-40 border border-blue-400 text-white shadow-md hover:scale-105 hover:bg-blue-600 hover:bg-opacity-50 dark:bg-blue-700 dark:bg-opacity-40 dark:border-blue-600 dark:hover:bg-blue-800 dark:hover:bg-opacity-50">
        All
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        Web Design
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        UI/UX
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        Branding
      </button>
      <button class="px-4 py-2 rounded-full text-sm font-semibold transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 shadow-md hover:scale-105 hover:bg-opacity-40 dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:hover:bg-opacity-50">
        Mobile App
      </button>
    </div>
    <div class="flex items-center gap-3">
      <label for="sort-by" class="sr-only">Sort By</label>
      <select id="sort-by" class="flex-grow appearance-none px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 backdrop-filter backdrop-blur-sm bg-white bg-opacity-30 border border-white border-opacity-60 text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 shadow-md dark:bg-gray-700 dark:bg-opacity-40 dark:border-gray-600 dark:text-white dark:focus:ring-blue-600">
        <option value="recent">Sort by: Recent</option>
        <option value="popularity">Sort by: Popularity</option>
        <option value="alphabetical">Sort by: Alphabetical</option>
      </select>
      <button aria-label="Apply Filters" class="p-3 rounded-full transition-all duration-300 transform backdrop-filter backdrop-blur-sm bg-gradient-to-r from-blue-500 to-indigo-500 bg-opacity-60 border border-opacity-40 border-blue-400 text-white shadow-md hover:scale-110 hover:from-blue-600 hover:to-indigo-600 dark:from-blue-700 dark:to-indigo-700 dark:hover:from-blue-800 dark:hover:to-indigo-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd" />
          </svg>
      </button>
    </div>
  </div>
</div>

Filters Component

A responsive Filters Component with 3D design elements in earth tones, suitable for a portfolio, with dark theme support.

Open Preview

                <div class="p-6 bg-stone-100 dark:bg-stone-900 min-h-screen">
  <h2 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Explore My Portfolio</h2>

  <div class="flex flex-wrap justify-center gap-4 mb-12">
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">All Projects</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Web Development</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">UI/UX Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
    <button class="bg-stone-300 hover:bg-stone-400 text-stone-800 font-semibold py-2 px-6 rounded-lg shadow-md transition-all duration-300 
                   transform hover:scale-105 dark:bg-stone-700 dark:hover:bg-stone-600 dark:text-stone-200 
                   relative overflow-hidden group">
      <span class="relative z-10">Graphic Design</span>
      <div class="absolute inset-0 bg-gradient-to-t from-stone-400 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </button>
  </div>
  
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <!-- Project Card 1 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project1/600/400" alt="Project 1" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title One</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A brief description of Project One, showcasing its key features and technologies used. This project demonstrates responsive design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">HTML</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">CSS</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Tailwind CSS</span>
      </div>
    </div>

    <!-- Project Card 2 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project2/600/400" alt="Project 2" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Two</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">This project focuses on a comprehensive UI/UX design approach, user flows, and wireframing for an intuitive experience.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Figma</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Prototyping</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Research</span>
      </div>
    </div>

    <!-- Project Card 3 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project3/600/400" alt="Project 3" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Three</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">An example of graphic design work including logo creation, branding guidelines, and marketing collateral design.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Photoshop</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrator</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Branding</span>
      </div>
    </div>

    <!-- Project Card 4 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project4/600/400" alt="Project 4" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Four</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A web development project featuring a dynamic and interactive frontend built with modern JavaScript frameworks.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">React</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Node.js</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">API Integration</span>
      </div>
    </div>

    <!-- Project Card 5 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project5/600/400" alt="Project 5" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Five</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">UI/UX case study exploring user research, persona creation, and iterative design processes for a mobile application.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">User Research</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Wireframing</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Usability Testing</span>
      </div>
    </div>

    <!-- Project Card 6 -->
    <div class="bg-stone-200 dark:bg-stone-800 rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102 hover:shadow-xl 
                relative overflow-hidden group flex flex-col">
      <div class="absolute inset-0 bg-gradient-to-br from-stone-400 to-stone-600 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
      <img src="https://picsum.photos/seed/project6/600/400" alt="Project 6" class="rounded-lg mb-4 shadow-md aspect-video object-cover">
      <h3 class="text-xl font-bold text-stone-800 dark:text-stone-200 mb-2">Project Title Six</h3>
      <p class="text-stone-700 dark:text-stone-300 text-sm flex-grow">A sophisticated graphic design project involving complex illustrations and print media layouts for a magazine.</p>
      <div class="mt-4 flex flex-wrap gap-2">
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Illustrations</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">InDesign</span>
        <span class="text-xs bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 px-3 py-1 rounded-full shadow-inner">Print Design</span>
      </div>
cv    </div>

  </div>
</div>

A complex, responsive, Glassmorphism-styled Filters Component with an Analogous color scheme for business/corporate websites. Features translucent elements and blur effects, with full dark mode support using Tailwind CSS. No JavaScript is included.

Open Preview

                <div class="2xl:container 2xl:mx-auto">
  <div class="py-12 px-4">
    <div class="lg:flex justify-between">
      <div class="lg:w-4/12">
        <h1 class="text-3xl font-semibold text-gray-800 dark:text-white">Filter by Category</h1>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-4">Explore a wide range of products tailored to your needs. From electronics to fashion, find exactly what you are looking for.</p>
        <div class="w-full bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 flex items-center justify-between mt-8">
          <input type="text" class="w-full bg-transparent text-base focus:outline-none placeholder-gray-600 text-gray-600 dark:text-gray-300 dark:placeholder-gray-300 py-4 px-4" placeholder="Search by name" />
          <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <circle cx="10" cy="10" r="7"></circle>
            <line x1="21" y1="21" x2="15" y2="15"></line>
          </svg>
        </div>
        <div class="mt-10">
          <div class="flex flex-col space-y-4">
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">All Categories</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Electronics</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Fashion</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Home & Kitchen</span>
            </label>
            <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
              <input type="checkbox" class="form-checkbox h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded dark:border-gray-700 dark:bg-gray-700">
              <span class="ml-2">Books</span>
            </label>
          </div>
        </div>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-8">Price Range</p>
        <div class="flex items-center justify-between mt-4">
          <input type="number" placeholder="Min" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
          <input type="number" placeholder="Max" class="w-2/5 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none" />
        </div>
        <p class="text-base text-gray-600 dark:text-gray-300 mt-8">Customer Reviews</p>
        <div class="flex flex-col space-y-4 mt-4">
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">5 Stars</span>
          </label>
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">4 Stars & Up</span>
          </label>
          <label class="flex items-center text-base text-gray-800 dark:text-white cursor-pointer">
            <input type="radio" name="Customer Reviews" class="form-radio h-5 w-5 text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded-full dark:border-gray-700 dark:bg-gray-700">
            <span class="ml-2">3 Stars & Up</span>
          </label>
        </div>
        <button class="w-full bg-indigo-600 dark:bg-indigo-700 text-white text-base font-semibold py-4 px-4 rounded mt-8">Apply Filters</button>
        <button class="w-full bg-transparent border border-gray-300 dark:border-gray-700 text-gray-800 dark:text-white text-base font-semibold py-4 px-4 rounded mt-4">Clear All</button>
      </div>
      <div class="lg:w-8/12 lg:ml-12 lg:mr-0 lg:mt-0 mt-6">
        <div class="flex items-center justify-between">
          <p class="text-base text-gray-600 dark:text-gray-300">Showing 1-12 of 200 products</p>
          <div class="flex items-center space-x-2">
            <select class="w-40 bg-gray-50 dark:bg-gray-800 rounded dark:border-gray-700 border border-gray-100 text-base text-gray-600 dark:text-gray-300 py-2 px-2 focus:outline-none">
              <option value="popularity">Sort by Popularity</option>
              <option value="price_asc">Price: Low to High</option>
              <option value="price_desc">Price: High to Low</option>
            </select>
          </div>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 mt-8">
          <!-- Product Card 1 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=1" alt="Product Image" />
              <div class="absolute bottom-0 left-0 bg-indigo-600 dark:bg-indigo-700 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
                New
              </div>
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$32.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 2 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=2" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$45.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 3 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=3" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$28.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 4 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=4" alt="Product Image" />
              <div class="absolute bottom-0 left-0 bg-yellow-500 dark:bg-yellow-600 text-white text-xs font-semibold px-3 py-1 rounded-tr-lg">
                Sale
              </div>
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$50.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 5 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=5" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$65.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 6 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=6" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$19.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 7 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=7" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$99.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 8 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=8" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$75.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 9 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=9" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$88.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 10 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=10" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$120.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 11 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=11" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$25.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
          <!-- Product Card 12 -->
          <div class="relative flex flex-col justify-center items-center bg-white dark:bg-gray-800 rounded-lg border border-gray-100 dark:border-gray-700 pb-8">
            <div class="absolute top-0 right-0 p-2">
              <svg class="w-6 h-6 text-gray-800 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
              </svg>
            </div>
            <div class="relative">
              <img class="w-full h-48 object-cover rounded-t-lg" src="https://picsum.photos/400/300?random=12" alt="Product Image" />
            </div>
            <div class="px-4 mt-4 w-full">
              <p class="text-lg font-semibold text-gray-800 dark:text-white">Product Name</p>
              <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">Short description of product</p>
              <div class="flex items-center justify-between mt-4">
                <p class="text-xl font-semibold text-gray-800 dark:text-white">$30.00</p>
                <button class="bg-indigo-600 dark:bg-indigo-700 text-white text-sm font-semibold py-2 px-4 rounded">Add to Cart</button>
              </div>
            </div>
          </div>
        </div>
        <div class="flex justify-center mt-8">
          <nav aria-label="Pagination">
            <ul class="flex">
              <li>
                <a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Previous</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-600 bg-indigo-100 border border-indigo-300 hover:bg-indigo-200 hover:text-indigo-800 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 dark:hover:text-white">1</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">2</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">3</a>
              </li>
              <li>
                <a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">Next</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

Filters Component

A minimalist and responsive Filters Component for e-commerce, with dark theme support. It includes categories, price range, and a color filter.

Open Preview

                <div class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 rounded-lg shadow-md">
  <h3 class="text-lg font-semibold mb-4">Filter Products</h3>
  
  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Categories</h4>
    <ul class="space-y-2 text-sm">
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Electronics</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Apparel</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Home Goods</a></li>
      <li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400">Books</a></li>
    </ul>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Price Range</h4>
    <input type="range" min="0" max="1000" value="500" class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer">
    <div class="flex justify-between text-sm mt-1">
      <span>$0</span>
      <span>$1000+</span>
    </div>
  </div>

  <div class="mb-6">
    <h4 class="text-md font-medium mb-2">Color</h4>
    <div class="flex space-x-2">
      <span class="block w-6 h-6 rounded-full bg-black cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
      <span class="block w-6 h-6 rounded-full bg-white cursor-pointer border-2 border-gray-400 dark:border-gray-500"></span>
      <span class="block w-6 h-6 rounded-full bg-gray-500 cursor-pointer border-2 border-gray-300 dark:border-gray-600"></span>
    </div>
  </div>

  <button class="w-full bg-gray-800 dark:bg-gray-700 text-white py-2 px-4 rounded-md hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-300">
    Apply Filters
  </button>
</div>

Filters Component

A retro/vintage-themed social media filter component with earth tones, simple layout, responsive design, and dark mode support.

Open Preview

                <div class="container mx-auto p-4 md:p-8 font-serif">

  <!-- Retro/Vintage Filters Section -->
  <div class="bg-amber-100 dark:bg-amber-900 rounded-lg shadow-lg p-6 mb-8 border-4 border-amber-800 dark:border-amber-200 transform -rotate-2">
    <h2 class="text-2xl md:text-3xl font-bold text-amber-800 dark:text-amber-200 mb-4 text-center uppercase tracking-wide">Vintage Filters</h2>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
      <!-- Filter 1 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage1/200/200" alt="Vintage Filter 1" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Sepia</p>
      </div>

      <!-- Filter 2 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage2/200/200" alt="Vintage Filter 2" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Grayscale</p>
      </div>

      <!-- Filter 3 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage3/200/200" alt="Vintage Filter 3" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Lomo</p>
      </div>

      <!-- Filter 4 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage4/200/200" alt="Vintage Filter 4" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Noir</p>
      </div>

      <!-- Filter 5 -->
      <div class="group cursor-pointer transform transition-transform duration-300 hover:scale-105">
        <img src="https://picsum.photos/seed/vintage5/200/200" alt="Vintage Filter 5" class="w-full h-32 object-cover rounded-lg shadow-md border-2 border-amber-600 group-hover:border-amber-400">
        <p class="text-center text-amber-700 dark:text-amber-300 mt-2 text-sm md:text-base font-semibold group-hover:underline">Retro</p>
      </div>
    </div>
  </div>

  <!-- Simple Adjustments Section -->
  <div class="bg-lime-100 dark:bg-lime-900 rounded-lg shadow-lg p-6 border-4 border-lime-800 dark:border-lime-200 transform rotate-1">
    <h2 class="text-2xl md:text-3xl font-bold text-lime-800 dark:text-lime-200 mb-4 text-center uppercase tracking-wide">Basic Adjustments</h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <!-- Adjustment 1 -->
      <div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
        <label for="brightness" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Brightness:</label>
        <input type="range" id="brightness" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
      </div>

      <!-- Adjustment 2 -->
      <div class="flex items-center space-x-4 bg-lime-200 dark:bg-lime-800 p-3 rounded-md shadow-sm">
        <label for="contrast" class="text-lime-800 dark:text-lime-200 font-semibold text-sm md:text-base">Contrast:</label>
        <input type="range" id="contrast" min="0" max="200" value="100" class="flex-grow accent-lime-600 pointer-events-none">
      </div>
    </div>
  </div>

</div>

Filters Component

A responsive filters component for e-commerce incorporating dark mode styling with an earth tones color scheme.

Open Preview

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold mb-4">Filter Products</h2>
    <div class="mb-4">
        <label class="block mb-2 font-medium">Category</label>
        <select class="bg-gray-800 text-white border border-gray-700 rounded p-2">
            <option>All Categories</option>
            <option>Electronics</option>
            <option>Fashion</option>
            <option>Home & Garden</option>
            <option>Sports</option>
        </select>
    </div>
    <div class="mb-4">
        <label class="block mb-2 font-medium">Price Range</label>
        <input type="range" min="0" max="100" class="w-full h-2 bg-gray-700 rounded appearance-none focus:outline-none">
    </div>
    <div class="mb-4">
        <label class="block mb-2 font-medium">Brand</label>
        <div class="flex flex-wrap">
            <div class="flex items-center mr-4">
                <input type="checkbox" id="brand1" class="mr-2">
                <label for="brand1" class="text-gray-300">Brand A</label>
            </div>
            <div class="flex items-center mr-4">
                <input type="checkbox" id="brand2" class="mr-2">
                <label for="brand2" class="text-gray-300">Brand B</label>
            </div>
            <div class="flex items-center mr-4">
                <input type="checkbox" id="brand3" class="mr-2">
                <label for="brand3" class="text-gray-300">Brand C</label>
            </div>
        </div>
    </div>
    <button class="bg-green-600 hover:bg-green-500 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50">Apply Filters</button>
</div>





<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/300/200?random=1" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h3 class="text-lg font-semibold">Product Name 1</h3>
            <p class="text-gray-400">Description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-green-500 font-bold">$25.00</span>
                <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/300/200?random=2" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h3 class="text-lg font-semibold">Product Name 2</h3>
            <p class="text-gray-400">Description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-green-500 font-bold">$30.00</span>
                <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/300/200?random=3" alt="Product Image" class="w-full h-48 object-cover">
        <div class="p-4">
            <h3 class="text-lg font-semibold">Product Name 3</h3>
            <p class="text-gray-400">Description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-green-500 font-bold">$15.00</span>
                <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold py-1 px-3 rounded-lg">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

FiltersComponent

A responsive Filters Component designed in Material Design style for E-commerce applications with a dark theme support. It includes multiple interactive elements for an enhanced shopping experience.

Open Preview

                <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Filters</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Categories</h3>
            <ul class="mt-2">
                <li><input type="checkbox" id="category1" class="mr-2"> <label for="category1" class="text-gray-700 dark:text-gray-300">Electronics</label></li>
                <li><input type="checkbox" id="category2" class="mr-2"> <label for="category2" class="text-gray-700 dark:text-gray-300">Fashion</label></li>
                <li><input type="checkbox" id="category3" class="mr-2"> <label for="category3" class="text-gray-700 dark:text-gray-300">Home Appliances</label></li>
                <li><input type="checkbox" id="category4" class="mr-2"> <label for="category4" class="text-gray-700 dark:text-gray-300">Books</label></li>
            </ul>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Price Range</h3>
            <input type="range" class="w-full" min="0" max="1000" step="10" value="500">
            <div class="flex justify-between text-gray-700 dark:text-gray-300">
                <span>$0</span>
                <span>$1000</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Brands</h3>
            <ul class="mt-2">
                <li><input type="checkbox" id="brand1" class="mr-2"> <label for="brand1" class="text-gray-700 dark:text-gray-300">Brand A</label></li>
                <li><input type="checkbox" id="brand2" class="mr-2"> <label for="brand2" class="text-gray-700 dark:text-gray-300">Brand B</label></li>
                <li><input type="checkbox" id="brand3" class="mr-2"> <label for="brand3" class="text-gray-700 dark:text-gray-300">Brand C</label></li>
            </ul>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Ratings</h3>
            <ul class="mt-2">
                <li><input type="radio" id="rating1" name="rating" class="mr-2" value="5"> <label for="rating1" class="text-gray-700 dark:text-gray-300">5 Stars</label></li>
                <li><input type="radio" id="rating2" name="rating" class="mr-2" value="4"> <label for="rating2" class="text-gray-700 dark:text-gray-300">4 Stars</label></li>
                <li><input type="radio" id="rating3" name="rating" class="mr-2" value="3"> <label for="rating3" class="text-gray-700 dark:text-gray-300">3 Stars</label></li>
            </ul>
        </div>
    </div>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">Apply Filters</button>
</div>

FiltersComponentNeumorphism

A simple responsive filters component styled with Neumorphism soft UI, using a grayscale color scheme, designed for business/corporate websites. The component supports dark mode and is built with Tailwind CSS without any JavaScript.

Open Preview

                <!-- Filters Component - Neumorphism Style, Grayscale, Responsive, Dark Mode -->
<section
  aria-label="Filter section"
  class="bg-gray-100 dark:bg-gray-800 p-6 rounded-xl flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)]"
>
  <!-- Search Input -->
  <div class="flex-1">
    <label for="filter-search" class="sr-only">Search</label>
    <input
      type="text"
      id="filter-search"
      placeholder="Search..."
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    />
  </div>
  <!-- Category Select -->
  <div class="flex-1">
    <label for="filter-category" class="sr-only">Category</label>
    <select
      id="filter-category"
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      <option>All Categories</option>
      <option>Marketing</option>
      <option>Finance</option>
      <option>HR</option>
    </select>
  </div>
  <!-- Status Select -->
  <div class="flex-1">
    <label for="filter-status" class="sr-only">Status</label>
    <select
      id="filter-status"
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      <option>All Status</option>
      <option>Active</option>
      <option>Inactive</option>
    </select>
  </div>
  <!-- Apply Button -->
  <div>
    <button
      type="button"
      class="px-6 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      Apply Filters
    </button>
  </div>
</section>

Filters Component

A filters component designed with a skeuomorphic style mimicking real-world controls, utilizing a grayscale color scheme, perfect for dashboards with complex interactive elements.

Open Preview

                <div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h2>
    <div class="flex flex-col space-y-4">
        <div class="flex items-center">
            <label for="search" class="text-gray-600 dark:text-gray-300 w-1/3">Search:</label>
            <input id="search" type="text" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600  rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" placeholder="Search..." />
        </div>
        <div class="flex items-center">
            <label for="date" class="text-gray-600 dark:text-gray-300 w-1/3">Date:</label>
            <input id="date" type="date" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring focus:ring-gray-500" />
        </div>
        <div class="flex items-center">
            <label for="category" class="text-gray-600 dark:text-gray-300 w-1/3">Category:</label>
            <select id="category" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 border border-gray-400 dark:border-gray-600 rounded-lg p-2 w-2/3 shadow-md focus:outline-none focus:ring 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 class="text-gray-600 dark:text-gray-300 w-1/3">Status:</label>
            <div class="flex items-center space-x-4 w-2/3">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
                    <span class="ml-2 text-gray-800 dark:text-gray-200">Active</span>
                </label>
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-600 dark:text-gray-300">
                    <span class="ml-2 text-gray-800 dark:text-gray-200">Inactive</span>
                </label>
            </div>
        </div>
        <button class="bg-gray-600 dark:bg-gray-400 text-white rounded-lg p-2 hover:bg-gray-700 dark:hover:bg-gray-500 transition duration-200">Apply Filters</button>
    </div>
</div>

BrutalistFilters

A simple and brutalist filter component for social media applications, with a complementary color scheme and dark mode support.

Open Preview

                <div class="container mx-auto p-4 dark:bg-gray-900">
  <div class="flex flex-col md:flex-row items-start md:items-center justify-between border-2 border-black dark:border-white p-4">
    <h2 class="text-2xl font-bold text-black dark:text-white mb-4 md:mb-0">Filters</h2>
    <div class="flex flex-wrap gap-2">
      <button class="px-4 py-2 bg-blue-500 text-white font-bold border-2 border-black dark:border-white hover:bg-blue-700 dark:bg-yellow-500 dark:text-black dark:hover:bg-yellow-700 transition duration-300">Latest</button>
      <button class="px-4 py-2 bg-red-500 text-white font-bold border-2 border-black dark:border-white hover:bg-red-700 dark:bg-green-500 dark:text-black dark:hover:bg-green-700 transition duration-300">Popular</button>
      <button class="px-4 py-2 bg-green-500 text-white font-bold border-2 border-black dark:border-white hover:bg-green-700 dark:bg-red-500 dark:text-black dark:hover:bg-red-700 transition duration-300">Friends</button>
      <button class="px-4 py-2 bg-yellow-500 text-white font-bold border-2 border-black dark:border-white hover:bg-yellow-700 dark:bg-blue-500 dark:text-black dark:hover:bg-blue-700 transition duration-300">Following</button>
    </div>
  </div>
</div>