JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co.s3-website-us-east-1.amazonaws.com/v1/jquery.isotope.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
    <ul id="filters" class="loaiduan clearfix">
        <li><a class="selected" href="#" data-filter="*">All</a></li>
        <li><a href="#" data-filter=".nokia">Nokia</a></li>
        <li><a href="#" data-filter=".samsung">Samsung</a></li>
        <li><a href="#" data-filter=".motorola">Motorola</a></li>
    </ul>

    <div id="container" class="list">

        <article class="itemda nokia">
            <figure class="text-center">
                <h5>Nokia E63</h5>
            </figure>
        </article>

        <article class="itemda samsung">
            <figure class="text-center">
                <h5>Samsung Galaxy S1</h5>
            </figure>
        </article>

        <article class="itemda motorola">
            <figure class="text-center">
                <h5>Motorola V3i</h5>
            </figure>
        </article>
        
        <article class="itemda nokia">
            <figure class="text-center">
                <h5>Nokia 6110c</h5>
            </figure>
        </article>

        <article class="itemda samsung">
            <figure class="text-center">
                <h5>Samsung SGH-E715</h5>
            </figure>
        </article>
    </div>
</div>

CSS

.loaiduan li {
    float: left;
    width: 11%;
    text-align: center;
    background: #fff;
    margin-left: 15px;
}
ul {
  list-style-type: none;
}

/**** Isotope Filtering ****/

.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;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

JavaScript

$(function(){
    
    var $container = $('#container'),
        $filterLinks = $('#filters a');
    
    $container.isotope({
      itemSelector: '.itemda',
      filter: '*'
    });
    
    $filterLinks.click(function(){
      var $this = $(this);
      $this.parents('li').css("background", "red");
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
          return;
      }
      
      $filterLinks.filter('.selected').removeClass('selected');
      $this.addClass('selected');

      if (!$filterLinks.hasClass('selected') ) {
        $filterLinks.parents('li').css("background", "white");
      }
      
      // get selector from data-filter attribute
      selector = $this.data('filter');
      
      $container.isotope({
        filter: selector
      });
      
      
    });
    
});