JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.mmjkarma.com/js/isotope/jquery.isotope.min.js"></script>
 <section id="filters">
  
      <h3>Strain Bank Filters</h3>

      <ul class="filter button-group radius" data-filter-group="strains">
        <li><a class="button secondary tiny active" href="#filter-strains-any" data-filter="*" >Show All</a></li>
        <li><a class="button secondary tiny" href="#filter-strains-sativa" data-filter=".sativa">Sativa</a></li>
        <li><a class="button secondary tiny" href="#filter-strains-sativa-dom" data-filter=".sativa-dom">Sativa Dominant</a></li>
        <li><a class="button secondary tiny" href="#filter-strains-hybrid" data-filter=".hybrid">Hybrid</a></li>
        <li><a class="button secondary tiny" href="#filter-strains-indica-dom" data-filter=".indica-dom">Indica Dominant</a></li>
        <li><a class="button secondary tiny" href="#filter-strains-indica" data-filter=".indica">Indica</a></li>
      </ul>
     
<div class="row">
 	<div class="small-4 columns">
      <div class="row collapse">
        <div class="small-9 columns">
          <input type="text" id="quicksearch" placeholder="Search Strains" />
        </div>
        <div class="small-3 columns">
          <a id="reset" href="#" class="button postfix secondary">Reset</a>
        </div>
      </div>
    </div>
</div>
</section>



<ul class="isotope">

	<li class="element hybrid a" data-category="hybrid">
      <p class="type">H</p>
      <h2 class="name">Acapulco Gold</h2>
      <p class="strain-info">No Info Available</p>
      <p class="review"><a class="button radius small black review-form-lb" href="#review-form-lightbox">Review Strain</a></p>
    </li>
     
    <li class="element indica a" data-category="indica">
      <p class="type">I</p>
      <h2 class="name">Afghan Kush</h2>
      <p class="strain-info">No Info Available</p>
      <p class="review"><a class="button radius small black review-form-lb" href="#review-form-lightbox">Review Strain</a></p>
    </li>
    
  ...

CSS

.isotope-item {
  z-index: 2;
}

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

/**** Isotope CSS3 transitions ****/

.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 li{
	list-style:none;
}
.isotope:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .active, button.secondary:focus, .button.secondary:focus{
	color:#fff;
	background:#111;
}

button.tiny, .button.tiny{
	font-size:0.8875rem;
	font-weight:bold;
}

.element .strain-info, .element .button, .element .rating, .element .button-group{
	visibility:hidden;
}

.element.large .strain-info, .element.large .button, .element.large .rating, element.large .button-group{
	visibility:visible;
}

/* 
.element .button{
	float:right;
	margin-right:5px;
} 

.view-strain{
	position:absolute;
	bottom:0;
	right:145px;
}
 */

.element {
  width: 100px;
  height: 100px;
  margin: 5px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #888;
  color: #fff;
  border-radius:20px 5px;
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
}

.element.sativa          { background: #990000; }
.element.sativa-dom  { background: #0d6e00; }
.element.hybrid    { background: #000;...

JavaScript

$( function() {
	
	
	    var $container = $('.isotope'),
		qsRegex,
        filters = {};
    
    $container.isotope({
      itemSelector : '.element',
      masonry : {
        columnWidth : 120
      },
      getSortData : {
        name : function ( $elem ) {
          return $elem.find('.name').text();
        }
      },
    filter: function() {
      return qsRegex ? $(this).text().match( qsRegex ) : true;
    }
    });

function searchFilter() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $container.isotope();
  }
  
  // use value of search field to filter
  var $quicksearch = $('#quicksearch').keyup( debounce( searchFilter ) );
  
  $('#reset').on( 'click', function() {
    $quicksearch.val('');
    searchFilter()
  });
  
    
  $('#filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = '';
    for ( var prop in filters ) {
      filterValue += filters[ prop ];
    }

	 // convert object into array
	var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
    // set filter for Isotope
    $container.isotope({ filter: filterValue });
	var selector = isoFilters.join('');
	$container.isotope({ filter: selector }, function noResultsCheck() {
		var noItems = $('<div class="element no-results large"><p class="type">Oops!</p><p class="strain-info">We do not show a strain of this combination. Please try another combination.</p></div>');
		var yesItems = $('.no-results');
    	var numItems = $('.element:not(.isotope-hidden)').length;
        if (numItems == 0) {
        	 $container.append(noItems).isotope( 'appended', noItems );
   		}else{ 
			$container.isotope( 'remove', yesItems);
		}
	});
  });

  // change...