JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div class="container">
    <div class="isotope-item"></div>
    <div class="isotope-item"></div>
    <div class="isotope-item"></div>
    <div class="isotope-item"></div>
    <div class="isotope-item"></div>
    <div class="isotope-item"></div>
    <div class="isotope-item"></div>
    <div class="isotope-item"></div>
    <div class="isotope-item"></div>
    <div class="isotope-item"></div>
</div>

CSS

.isotope {
    background: #999;
    margin: 0 auto;
    width: 60%;
}
.container{
  width: 300px;
}

.isotope-item {
    width: 100px;
    background: lightblue;
    border: 1px solid blue;
    -webkit-box-sizing: border-box;
}

.isotope-item:nth-child(odd)  { height: 125px }
.isotope-item:nth-child(even) { height: 150px }

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.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;
}

/* End: Recommended Isotope styles */

JavaScript

jQuery.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;
};

jQuery.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 );
    }
};

jQuery.Isotope.prototype._masonryResizeChanged = function() {
    var prevColCount = this.masonry.cols;
    // get updated colCount
    this._getCenteredMasonryColumns();
    return ( this.masonry.cols !== prevColCount );
  };
  
jQuery.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
    };
};

$(document).ready(function() {
    
    $('.container').isotope({
		itemSelector: '.isotope-item',
		masonry: {
			columnWidth: 100,
            gutterWidth: 30
		}
	});

});