JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<input type="text" name="q" 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;


// init Isotope
var iso = new Isotope('#grid', {
  itemSelector: '.item',
  layoutMode: 'fitRows',
  transitionDuration: 1000,

  filter: function(itemElem) {
    return qsRegex ? itemElem.textContent.match(qsRegex) : true;
  }
});


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


  // match items by first letter only
  qsRegex = new RegExp("(^|\\s)(" + quicksearch.value + ")", 'gi');
  iso.arrange();
});