JSFiddle - React, Tailwind, and code Playground

HTML

<select id="filter_color">
  <option value="all">все</option>
  <option value="red">красный</option>
  <option value="blue">синий</option>
  <option value="green">зелёный</option>
  <option value="orange">оранжевый</option>
  <option value="yellow">жёлтый</option>
</select>
<select id="filter_shape">
  <option value="all">все</option>
  <option value="square">квадратный</option>
  <option value="rounded">скруглённый</option>
  <option value="round">круглый</option>
</select>

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

CSS

#items {
  margin-top: 100px;
}

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

[data-color="red"] { background: #cf2624; }
[data-color="blue"] { background: #2478cf; }
[data-color="green"] { background: #24cf7c; }
[data-color="orange"] { background: #cf7c24; }
[data-color="yellow"] { background: #f1e81f; }

[data-shape="round"] { border-radius: 50%; }
[data-shape="rounded"] { border-radius: 10px; }
[data-shape="square"] { border-radius: 0px; }

JavaScript

var filter_color_el = document.getElementById('filter_color');
var filter_shape_el = document.getElementById('filter_shape');
var items_el = document.getElementById('items');

var filter = function() {
    var items = items_el.getElementsByClassName('item');
    for (var i = 0; i < items.length; i++) {
        if ((filter_color_el.value == 'all' || filter_color_el.value == items[i].dataset.color) &&
            (filter_shape_el.value == 'all' || filter_shape_el.value == items[i].dataset.shape)) {
            items[i].style.display = 'block';
        } else {
            items[i].style.display = 'none';
        }
    }
};

filter_color_el.addEventListener("change", filter);
filter_shape_el.addEventListener("change", filter);