JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<nav id="main-nav">
    <ul class="option-set clearfix" data-option-key="sortBy" id="sort-by">
        <li><a class="selected" href="#sortBy=original-order" data-option-value="original-order">Original</a>
        </li>
        <li><a href="#sortBy=milk" data-option-value="milk">Milk</a>
        </li>
        <li><a href="#sortBy=eggs" data-option-value="eggs">Eggs</a>
        </li>
        <li><a href="#sortBy=bacon" data-option-value="bacon">Bacon</a>
        </li>
    </ul>
</nav>
<section id="homepage-grid">
    <article class="large" data-category="milk">Milk - #1</article>
    <article class="medium milk" data-category="milk">Milk - #2</article>
    <article class="small milk" data-category="milk">Milk - #3</article>
    <article class="small milk" data-category="milk">Milk - #4</article>
    <article class="medium milk" data-category="milk">Milk - #5</article>
    <article class="large eggs" data-category="eggs">Eggs - #1</article>
    <article class="medium eggs" data-category="eggs">Eggs - #2</article>
    <article class="small eggs" data-category="eggs">Eggs - #3</article>
    <article class="small eggs" data-category="eggs">Eggs - #4</article>
    <article class="small eggs" data-category="eggs">Eggs - #5</article>
    <article class="large bacon" data-category="bacon">Bacon - #1</article>
    <article class="medium bacon" data-category="bacon">Bacon - #2</article>
    <article class="small bacon" data-category="bacon">Bacon - #3</article>
    <article class="small bacon" data-category="bacon">Bacon - #4</article>
</section>

CSS

#homepage-grid {
    margin:5px;
}
article {
    line-height:115px;
    margin:5px;
    text-align:center;
}
.small {
    background:#ddd;
    height:115px;
    width:115px;
}
.medium {
    background:#ccc;
    height:115px;
    width:240px;
}
.large {
    background:#aaa;
    height:240px;
    line-height:240px;
    width:240px;
}
.isotope, .isotope .isotope-item {
    transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
}
.isotope {
    transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    -webkit-transition-property: height, width;
}
.isotope .isotope-item {
    transition-property: transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: top, left, opacity;
    -webkit-transition-property: -webkit-transform, opacity;
}

JavaScript

jQuery(document).ready(function ($) {

    var $container = $('#homepage-grid');
    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: 'article',
            masonry: {
                columnWidth: 125
            },
            getSortData: {
                category: function ($elem) {
                    var isMilk = $elem.hasClass('eggs');
                    return (!isMilk ? ' ' : '');
                },
            }
        });
    });

    var $optionSets = $('#main-nav .option-set'),
        $optionLinks = $optionSets.find('a');

    $optionLinks.click(function () {
        var $this = $(this);
        // don't proceed if already selected
        if ($this.hasClass('selected')) {
            return false;
        }
        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');

        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
        key = $optionSet.attr('data-option-key'),
            value = $this.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[key] = value;
        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
            // changes in layout modes need extra logic
            changeLayoutMode($this, options)
        } else {
            // otherwise, apply new options
            $container.isotope(options);
        }

        return false;
    });

});