JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3.0.1/dist/isotope.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1.1/imagesloaded.pkgd.js"></script>
<!-- ====================
///// Begin isotope ///// 
===================== -->
<div class="isotope">

  <!-- Begin isotope filter -->
  <div class="isotope-filter">
    <ul class="isotope-filter-links">
      <li><a href="javascript:void(0);" class="active" data-filter="*">Show All</a></li>
      <li><a href="javascript:void(0);" data-filter="red">Red</a></li>
      <li><a href="javascript:void(0);" data-filter="green">Green</a></li>
      <li><a href="javascript:void(0);" data-filter="blue">Blue</a></li>
      <li><a href="javascript:void(0);" data-filter="purple">Purple</a></li>
    </ul>
  </div>
  <!-- End isotope filter -->

  <!-- Begin isotope items wrap 
  ============================== -->
  <div class="isotope-items-wrap">

    <div class="isotope-item height-2" data-filter="red">
      <div class="box box-red">
        Box-1
      </div>
    </div>
    
    <div class="isotope-item height-2" data-filter="red">
      <div class="box box-red">
        Box-1
      </div>
    </div>
    
    <div class="isotope-item height-2" data-filter="red">
      <div class="box box-red">
        Box-1
      </div>
    </div>
    
    <div class="isotope-item height-2" data-filter="red">
      <div class="box box-red">
        Box-1
      </div>
    </div>
    
    <div class="isotope-item height-2" data-filter="red">
      <div class="box box-red">
        Box-1
      </div>
    </div>
    
    <div class="isotope-item height-2" data-filter="red">
      <div class="box box-red">
        Box-1
      </div>
    </div>
    
    <div class="isotope-item height-2" data-filter="red">
      <div class="box box-red">
        Box-1
      </div>
    </div>

    <div class="isotope-item" data-filter="green">
      <div class="box box-green">
  ...

CSS

/* Isotope 
================== */
.isotope {
  overflow: hidden;
}

/* Isotope filter 
================== */
.isotope-filter {
  padding: 20px 1.2%;
  text-align: center;
}

ul.isotope-filter-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.isotope-filter-links > li {
	display: inline-block;
	margin: 0 8px;
}
ul.isotope-filter-links > li:first-child {
	margin-left: 0;
}
ul.isotope-filter-links > li:last-child {
	margin-right: 0;
}
ul.isotope-filter-links > li > a {
	position: relative;
	display: block;
	padding: 3px 0;
  text-decoration: none;
	font-size: 16px;
	color: #333;
}
ul.isotope-filter-links > li > a:hover {
  color: #2671ca;
}
ul.isotope-filter-links > li > a.active {
  color: #2671ca;
  border-bottom: 2px solid #2671ca;
}

/* Isotope items wrap
====================== */
.isotope-items-wrap {
  -webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

/* Isotope item 
=================== */
.isotope-item {
  float: left;
  width: 33.33333333%;
  height: auto;
  box-sizing: border-box;
  padding: 1.2%;
}

/* Box 
================== */
.box {
  padding-bottom: 65%; 
  background-color: #2671ca; 
  color: #fff;
}
.height-2 .box {
  padding-bottom: 130%;
}

.box-red { background-color: red; }
.box-green { background-color: green; }
.box-blue { background-color: blue; }
.box-purple { background-color: purple; }

/* Isotope pager
================== */
.isotope-pager {
    padding: 30px 15px;
    text-align: center;
}
.isotope-pager .pager {
    display: inline-block;
    background-color: #222;
    margin: 3px;
    padding: 3px 8px;
    text-decoration: none;
    color: #FFF;
}

.isotope-pager .active {
  background-color: #2671ca;
}

JavaScript

$(function() {

	// Init Isotope
  var itemSelector = '.isotope-item';
  var $container = $('.isotope-items-wrap');
  $container.imagesLoaded(function() {
    $container.isotope({
      itemSelector: itemSelector,
      transitionDuration: '0.5s',
        masonry: {
          columnWidth: itemSelector
        },
      filter: itemSelector + '[' + pageAtribute + '="' + currentPage + '"]', // filter: '.isotope-item[data-page="1"]' // to make itemsPerPageDefault number of items appear on page load.
    });
  });

	// Ascending order
	var responsiveIsotope = [
		[480, 4],
		[720, 6]
	];

	// Parameters
	var itemsPerPageDefault = 10;
	var itemsPerPage = defineItemsPerPage();
	var currentNumberPages = 1;
	var currentPage = 1;
	var currentFilter = '*';
	var filterAtribute = 'data-filter';
	var pageAtribute = 'data-page';
	var pagerClass = 'isotope-pager';

	function changeFilter(selector) {
		$container.isotope({
			filter: selector
		});
	}

	// Go to page
	function goToPage(n) {
		currentPage = n;

		var selector = itemSelector;
			selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
			selector += '['+pageAtribute+'="'+currentPage+'"]';

		changeFilter(selector);
	}

	// Define items per page
	function defineItemsPerPage() {
		var pages = itemsPerPageDefault;

		for( var i = 0; i < responsiveIsotope.length; i++ ) {
			if( $(window).width() <= responsiveIsotope[i][0] ) {
				pages = responsiveIsotope[i][1];
				break;
			}
		}
		return pages;
	}
	
  // Set pagination
	function setPagination() {
		var SettingsPagesOnItems = function(){

			var itemsLength = $container.children(itemSelector).length;
			
			var pages = Math.ceil(itemsLength / itemsPerPage);
			var item = 1;
			var page = 1;
			var selector = itemSelector;
				selector += ( currentFilter != '*' ) ? '['+filterAtribute+'="'+currentFilter+'"]' : '';
			
			$container.children(selector).each(function(){
				if( item > itemsPerPage ) {
					page++;
					item =...