JSFiddle - React, Tailwind, and code Playground

HTML

<div class="filters"></div>
<div class="items"></div>

CSS

.item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 80px;
  margin: 5px;
  border: 1px solid silver;
  color: white;
  font: bold 24px monospace;
}

.red { background: red; }
.blue { background: blue; }
.green { background: green; }
.red.blue { background: linear-gradient(to left, red, blue); }
.red.green { background: linear-gradient(to left, red, green); }
.green.blue { background: linear-gradient(to left, green, blue); }

.active {
  background: red;
  color: white;
}

.hidden {
  display: none;
}

JavaScript

const filters = [
  { value:  'item', label: 'All' },
  { value:   'red', label: 'Red' },
  { value: 'green', label: 'Green' },
  { value:  'blue', label: 'Blue' }
];

const filtersEl = document.querySelector('.filters');

filtersEl.innerHTML = filters
  .map(n => `<button data-category="${n.value}">${n.label}</button>`)
  .join('');

filtersEl.addEventListener('click', e => {
  const { category } = e.target.dataset;
  if (category) {
    e.currentTarget.querySelectorAll('[data-category]').forEach(n => {
      n.classList.toggle('active', n === e.target);
    });

    document.querySelectorAll('.items .item').forEach(n => {
      n.classList.toggle('hidden', !n.classList.contains(category));
    });
  }
});

filtersEl.querySelector('[data-category]').click();










document.querySelector('.items').innerHTML = Array
  .from({ length: 100 }, (n, i) => {
    const allClasses = filters.slice(1).map(n => n.value);
    const itemClasses = Array.from(
      { length: 1 + Math.random() * (allClasses.length - 1) | 0 },
      () => allClasses.splice(Math.random() * allClasses.length | 0, 1)[0]
    );

    return `<div class="item ${itemClasses.join(' ')}">${i}</div>`;
  })
  .join('');