JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://look.sb-studio.co.uk/js/jquery.imagesloaded.js"></script>
<script src="http://look.sb-studio.co.uk/js/jquery.isotope.min.js"></script>
<script src="http://look.sb-studio.co.uk/js/isotope-center.js"></script>
<script src="http://www.nealfletcher.co.uk/sb-test/js/hashchange.min.js"></script>
<script src="http://www.nealfletcher.co.uk/sb-test/js/jquery.ba-hashchange.js"></script>
<div id="main-grid">
    <div class="grid-block-filter"> <a href="#" data-filter=".one-block">
        <div class="grid-block nav-block one-block">
            ONE FILTER
        </div>
        </a>

    </div>
    <div class="grid-block-filter"> <a href="#" data-filter=".two-block">
        <div class="grid-block nav-block two-block">
            TWO FILTER
        </div>
        </a>

    </div>
    <div class="grid-block test two-block">TWO</div>
    <div class="grid-block test one-block">ONE</div>
    <div class="grid-block best two-block">TWO</div>
</div>

CSS

#main-grid {
    width: auto;
    position: relative;
    margin: 0 auto;
}
.grid-block {
    width: 150px;
    height: 120px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: pink;
}
/*
ISOTOPE CONTENT ------------------
*/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.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;
}
/**** disabling Isotope CSS3 transitions ****/
 .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

$(document).ready(function () {

    var $container = $('#main-grid');
    // initial filter
    var hashfilter = location.hash && ( '.' + location.hash.substr(1) ) || '.nav-block';

    $container.imagesLoaded(function () {
        $container.isotope({
            filter: hashfilter,
            itemSelector: '.grid-block',
            animationEngine: 'best-available',
            masonry: {
                columnWidth: 4
            }
        });
    });

    $('.grid-block-filter a').click(function () {
        var selector = jQuery(this).attr('data-filter');
        var prettyselector = selector.substr(1);
        location.hash = prettyselector;
        return false;
    });

    $(window).hashchange(function () {

    var hashfilter = location.hash && ( '.' + location.hash.substr(1) ) || '*';


        $container.isotope({
            filter: hashfilter
        });

    });
});