JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<input type="text" name="q" class="quicksearch" placeholder="search items..." />

<div id="grid">
 
 <span class="item">Orange
    <div class="keywords">fruit color</div>
  </span>

 <span class="item">Car
    <div class="keywords">transport automobile</div>
  </span>

 <span class="item">Bird
    <div class="keywords">animal feather</div>
  </span>
  
</div>

CSS

.item {
  background: yellow;
  padding: 3px 6px;
  margin-right: 10px;
}

.keywords {
  display: none;
}

JavaScript

// quick search regex
var qsRegex;
var quicksearch = document.querySelector('input[type="text"]');

// init Isotope
var iso = new Isotope('#grid', {
  itemSelector: '.item',
  layoutMode: 'fitRows',
  transitionDuration: 1000,
  filter: function(itemElem) {
      var qsRegex = [];
      var resultRegex = [];
      var endResult = new Boolean();
      var searchID = quicksearch.value;
      var searchTable = searchID.split(" ");
      for (var i = 0; i < searchTable.length; i++) {
        qsRegex[i] = new RegExp("(^|\\s)(" + searchTable[i] + ")", 'gi');
        resultRegex[i] = qsRegex[i] ? itemElem.textContent.match(qsRegex[i]) : true;
        endResult = endResult && resultRegex[i];
      }
      return endResult;
  }
});


// use value of input to filter
var quicksearch = document.querySelector('input[type="text"]');
quicksearch.addEventListener('input', function() {

  
  iso.arrange();


});