JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<ul id="filters">
    <li><a data-filter="*" href="#" class="button">All</a></li>
    <li><a data-filter=".option1" href="#" class="button">Option 1</a></li>
    <li><a data-filter=".option2" href="#" class="button">Option 2</a></li>
</ul>
<div id="container">
    <div class="item w1 h2 option1"></div>
    <div class="item w1 h1 option2"></div>
    <div class="item w1 h1 option1"></div>
    <div class="item w2 h2 option2"></div>
    <div class="item w1 h2 option1"></div>
</div>

CSS

#container {
    padding: 5px;
    margin: 0 auto;
    border: 2px solid black;
}

.item {
    float: left;
    background: #CCC;
    margin: 5px;
    width: 50px;
    height: 50px;
}
.item.w2 { width: 110px; }
.item.h2 { height: 110px; }

/* no transition on .isotope container */

.isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

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

JavaScript

$(function() {

    $.Isotope.prototype._getCenteredMasonryColumns = function() {
        this.width = this.element.width();
        var parentWidth = this.element.parent().width();
        // i.e. options.masonry && options.masonry.columnWidth
        var colW = this.options.masonry && this.options.masonry.columnWidth ||
        // or use the size of the first item
        this.$filteredAtoms.outerWidth(true) ||
        // if there's no items, use size of container
        parentWidth;
        var cols = Math.floor(parentWidth / colW);
        cols = Math.max(cols, 1);
        // i.e. this.masonry.cols = ....
        this.masonry.cols = cols;
        // i.e. this.masonry.columnWidth = ...
        this.masonry.columnWidth = colW;
    };

    $.Isotope.prototype._masonryReset = function() {
        // layout-specific props
        this.masonry = {};
        // FIXME shouldn't have to call this again
        this._getCenteredMasonryColumns();
        var i = this.masonry.cols;
        this.masonry.colYs = [];
        while (i--) {
            this.masonry.colYs.push(0);
        }
    };

    $.Isotope.prototype._masonryResizeChanged = function() {
        var prevColCount = this.masonry.cols;
        // get updated colCount
        this._getCenteredMasonryColumns();
        return (this.masonry.cols !== prevColCount);
    };

    $.Isotope.prototype._masonryGetContainerSize = function() {
        var unusedCols = 0,
            i = this.masonry.cols;
        // count unused columns
        while (--i) {
            if (this.masonry.colYs[i] !== 0) {
                break;
            }
            unusedCols++;
        }
        return {
            height: Math.max.apply(Math, this.masonry.colYs),
            // fit container to columns that have been used;
            width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth
        };
    };


    var $container = $('#container'),
        $body = $('body'),
        colW = 60,
        columns = null;

  ...