Building a Responsive Product Filter and Sort UI with Tailwind CSS

Product filtering and sorting are essential for modern e-commerce experiences. Whether it's size, price, or category filters, users expect an intuitive interface that works well on all devices.

In this tutorial, we’ll build a responsive filter and sort section using Tailwind CSS, without needing any heavy JavaScript framework.

Step 1: Filter & Sort Header Layout

Let’s start with a flex container that adapts across screen sizes.

<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 p-4 border-b">
  <!-- Filters -->
  <div class="flex gap-2 flex-wrap">
    <button class="border px-4 py-2 rounded text-sm hover:bg-gray-100">T-Shirts</button>
    <button class="border px-4 py-2 rounded text-sm hover:bg-gray-100">Jackets</button>
    <button class="border px-4 py-2 rounded text-sm hover:bg-gray-100">Shoes</button>
  </div>

  <!-- Sort Dropdown -->
  <div>
    <select class="border px-4 py-2 rounded text-sm">
      <option>Sort by: Featured</option>
      <option>Price: Low to High</option>
      <option>Price: High to Low</option>
      <option>Newest</option>
    </select>
  </div>
</div>

Step 2: Mobile-First Adaptability

Tailwind’s flex-wrap, gap, and md: utilities make this layout automatically adapt for mobile screens—no media queries needed.

You can add overflow-x-auto if your filters exceed screen width.

Step 3: Active Filter State

Highlight active filters using background color and text contrast:

<button class="border px-4 py-2 rounded text-sm bg-black text-white">Jackets</button>

Add icons (e.g. using Heroicons) for better UX, especially for "clear filter" buttons.

Step 4: Vertical Sidebar Filters (Optional)

For a desktop experience, you may want to add filters in a sidebar:

<div class="hidden lg:block w-64 border-r p-4">
  <h3 class="font-semibold mb-2">Filter by Size</h3>
  <ul class="space-y-1 text-sm">
    <li><input type="checkbox" class="mr-2"> S</li>
    <li><input type="checkbox" class="mr-2"> M</li>
    <li><input type="checkbox" class="mr-2"> L</li>
  </ul>
</div>

Pair with mobile slide-in drawers using Alpine.js or HTMX for interactivity.

✅ Pros:

• 📱 Fully responsive with minimal effort
• 🧩 Easy to plug into backend or client-side filters
• ⚡ Clean, accessible UI structure for modern stores

⚠️ Cons:

• 🔁 Filtering logic requires JS or server-side processing
• 🧭 Consider accessibility roles for form elements and buttons

Summary

With Tailwind CSS, you can build robust, responsive filtering and sorting UIs quickly. These components keep your customers engaged and make product discovery fast and intuitive—key for increasing sales and satisfaction.

📘 Want more practical Tailwind UI components for online stores?

Download my 17-page guide, Creating a Responsive E-commerce UI with Tailwind, for just $10. It includes layouts for filtering, cart drawers, checkout pages, and more—built for real-world e-commerce workflows.

If this article helped, consider supporting me here: Buy Me a Coffee ☕