JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" name="item-filter" id="item" checked>
<input type="radio" name="item-filter" id="red">
<input type="radio" name="item-filter" id="green">
<input type="radio" name="item-filter" id="blue">
<div class="filters">
  <label for="item">All</label>
  <label for="red">Red</label>
  <label for="green">Green</label>
  <label for="blue">Blue</label>
</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); }


.filters label {
  display: inline-block;
  margin: 2px;
  padding: 5px 10px;
  border: 1px solid silver;
  cursor: pointer;
}

[name="item-filter"] {
  display: none;
}

#item:checked ~ .filters [for="item"],
#red:checked ~ .filters [for="red"],
#green:checked ~ .filters [for="green"],
#blue:checked ~ .filters [for="blue"] {
  background: red;
  color: white;
}

#red:checked ~ .items :not(.red),
#green:checked ~ .items :not(.green),
#blue:checked ~ .items :not(.blue) {
  display: none;
}

JavaScript

document.querySelector('.items').innerHTML = Array
  .from({ length: 100 }, (n, i) => {
    const allClasses = [ 'red', 'green', 'blue' ];
    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('');