JSFiddle - React, Tailwind, and code Playground

HTML

<select id="filter">
  <option value="item">все</option>
  <option value="red">красный</option>
  <option value="blue">синий</option>
  <option value="green">зелёный</option>
  <option value="orange">оранжевый</option>
  <option value="yellow">жёлтый</option>
</select>

<div class="items">
  <div class="item red">1</div>
  <div class="item blue">2</div>
  <div class="item red">3</div>
  <div class="item green">4</div>
  <div class="item red">5</div>
  <div class="item orange">6</div>
  <div class="item green">7</div>
  <div class="item yellow">8</div>
  <div class="item green">9</div>
  <div class="item orange">10</div>
  <div class="item yellow">11</div>
  <div class="item blue">12</div>
  <div class="item green">13</div>
  <div class="item orange">14</div>
  <div class="item blue">15</div>
  <div class="item orange">16</div>
  <div class="item red">17</div>
  <div class="item yellow">18</div>
</div>

<div class="items">
  <div class="item red">19</div>
  <div class="item blue">20</div>
  <div class="item green">21</div>
  <div class="item red">22</div>
  <div class="item yellow">23</div>
</div>

CSS

.items {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
}

.item {
  width: 50px;
  height: 50px;
  margin: 1px;
}

.red { background: #cf2624; }
.blue { background: #2478cf; }
.green { background: #24cf7c; }
.orange { background: #cf7c24; }
.yellow { background: #f1e81f; }

JavaScript

var filter_select_el = document.getElementById('filter');
var items_el = document.getElementsByClassName('items');

filter_select_el.onchange = function() {
	console.log(this.value);
  for (var i=0; i< items_el.length; i++) {
  	var items = items_el[i].getElementsByClassName('item');
    for (var j=0; j<items.length; j++) {
      if (items[j].classList.contains(this.value)) {
        items[j].style.display = 'block';
      } else {
        items[j].style.display = 'none';
      }
    }
  }
};