JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/1.5.25/jquery.isotope.min.js"></script>
<div id = "countries" class="slidein">
    <ul>
        <li><a class="filter active" href="#" data-filter="*">All</a></li>
        <li><a class="filter" href="#" data-filter=".Sweden">Sweden</a></li>
        <li><a class="filter" href="#" data-filter=".Norway">Norway</a></li>
        <li><a class="filter" href="#" data-filter=".Germany">Germany</a></li>
    </ul>
</div>

<div id = "nums" class="slidein">
    This work if you test this first. But if you use this and then another function like sort by countries(Sweden,Norway..) and search fields, it will break it :/<br /><br />
    <select>
        <option value="*">All</option>
        <option value=".1">One</option>
       
    </select>
</div>

<input type="text" placeholder="Search... (by name)" class = "inputSearch" id="search-name"><br>
<input type="text" placeholder="Search... (by tags)" class = "inputSearch" id="search-tag"><br>

<div class="portfolio-items isotope">
    <div class="item Sweden 1" data-tag="tag1"><p class="name">D</p></div>
    <div class="item Norway 2" data-tag="tag2"><p class="name">C</p></div>
    <div class="item Norway 3" data-tag="tag3"><p class="name">B</p></div>
    <div class="item Germany 2" data-tag="tag4"><p class="name">A</p></div>
</div>

CSS

* {
    margin:0;i
    padding:0;
}
li {
    list-style-type:none;
}
a {
display:block;
position:relative;
}
a.filter {
    color:#444;
    text-decoration:none;
    padding:5px;
}

a.filter.active {
    text-decoration:underline;
}
.slidein {
    padding: 15px;
}
.item {
    width:20%;
    margin:1%;
    background-color:#000;
    color:#fff;
    padding:20px;
}

input.inputSearch {
    border:1px solid #999;
    padding:10px;
    border-radius:3px;
    margin-bottom:15px;
    margin:15px;
}

/*** Isotope ***/

.isotope-item {
  	z-index: 2;
}
.isotope-hidden.isotope-item {
  	pointer-events: none;
  	z-index: 1;
}

.isotope,
.isotope .isotope-item {
  	-webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
  	-webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
  	-webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity;
}
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  	-webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

var nameRegex, tagRegex;
var buttonFilter1 = "*";

var $container = $('.portfolio-items').isotope({
  itemSelector: '.item',
  layoutMode: 'masonry',
    getSortData : {
      name : function ( $elem ) {
        return $elem.find('.name').text();
      }
    },
  filter: function() {
    var $this = $(this);
    var searchResult1 = nameRegex ? $this.text().match( nameRegex ) : true;
    var searchResult2 = tagRegex ? $this.data("tag").match( tagRegex ) : true;
    var buttonResult = $this.is( buttonFilter1 );
    return searchResult1 && searchResult2 && buttonResult;
  },
  animationOptions: {
      duration: 750,
      easing: 'linear',
      queue: false
  }
});


    $('#countries').on( 'click', 'a.filter', function() {
        buttonFilter1 = $( this ).attr('data-filter');
        $container.isotope({
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    });

  $('select').on( 'change', function() {
        var filterValue = this.value;
        $container.isotope({ 
        filter: filterValue 
        });
        return false;
  });


  $('.slidein').each( function( i, slidein ) {
    var $slidein = $( slidein );
    $slidein.on( 'click', 'a.filter', function() {
      $slidein.find('.active').removeClass('active');
      $( this ).addClass('active');
    });
  });

var $quicksearch1 = $('#search-name').keyup( debounce( function() {
  nameRegex = new RegExp( $quicksearch1.val(), 'gi' );
  $container.isotope();
}) );

var $quicksearch2 = $('#search-tag').keyup( debounce( function() {
  tagRegex = new RegExp( $quicksearch2.val(), 'gi' );
  $container.isotope();
}) );

function debounce( fn, threshold ) {
  var timeout;
  return function debounced() {
    if ( timeout ) {
      clearTimeout( timeout );
    }
    function delayed() {
      fn();
      timeout = null;
    }
    setTimeout( delayed, threshold || 100 );
  };
}