JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/isotope.pkgd.min.js"></script>
<div id="container">
    <div class="grid-sizer"></div>
    <div class="gutter-sizer"></div>
    <div class="item"></div>
    <div class="item w3"></div>
    <div class="item w2"></div>
    <div class="item w2"></div>
    <div class="item h2"></div>
    <div class="item w3"></div>
    <div class="item w3"></div>
    <div class="item w2"></div>
    <div class="item w2"></div>
</div>

CSS

#container {
    width: 900px;
}
.item {
    float: left;
    height: 200px;
    background: blue;
    margin-bottom: 1%;
    overflow: hidden;
}
.gutter-sizer { width: 1%; }

.item, .grid-sizer {width: 24%;}
.item.w2 { width: 49%; background: red}
.item.w3 { width: 74%; }
.item.w4 { width: 99%; }
.item.h2 { height: 400px; }

JavaScript

var $container = $('#container');
  // init
  $container.isotope({
    // options
    masonry: {
      columnWidth: '.grid-sizer',
      gutter: '.gutter-sizer'
    },
    itemSelector: '.item'
  });