JSFiddle - React, Tailwind, and code Playground

HTML

<select class="filter__selector">
    <option value="all">All</option>
    <option value="frankfurt">Frankfurt</option>
    <option value="berlin">Berlin</option>
</select>
<main>
<ul class="projects__entries">
  <li class="projects__entry berlin">01</li>
  <li class="projects__entry">02</li>
  <li class="projects__entry berlin">03</li>
  <li class="projects__entry">04</li>
  <li class="projects__entry frankfurt">05</li>
  <li class="projects__entry">06</li>
  <li class="projects__entry frankfurt">07</li>
  <li class="projects__entry frankfurt">08</li>
</ul>
</main>

CSS

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.projects__entry {
  box-sizing: border-box;
  display: block;
  float: left;
  width: 33.3%;
  border-right: 2px solid red;
  border-bottom: 2px solid red;
}

.projects__entry:nth-child(3n+3) {
    border-color: blue;
}

JavaScript

// FILTER FOR TAGS
  $('.filter__selector').change(function(){
    var sel = $(this).val();
    $('.filterItem').hide();
        //console.log(sel);
      if(sel != "all"){
        $('main').find('.projects__entry').hide();
        $('main').find('.' + sel).parents('.projects__entry').show();
        $('main').find('.' + sel).parents('.projects__audio').show();
        $('main').find('.' + sel).show();
        $('img').css('border-bottom','none');

      }
      else {
        $('main').find('.projects__entry').show();
      }
    }
  );