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 h2 w3"></div>
    <div class="item h2"></div>
    <div class="item w3"></div>
    <div class="item"></div>
    <div class="item w2"></div>
    <div class="item w2"></div>
    <div class="item w3"></div>
    <div class="item"></div>
</div>

CSS

.item {
    float: left;
    height: 260px;
    background: blue;
    margin-bottom: 1%;
    overflow: hidden;
}
.gutter-sizer {
    width: 1%;
}
.item, .grid-sizer {
    width: 24%;
}
.item.w2 {
    width: 49%;
}
.item.w3 {
    width: 74%;
}
.item.w4 {
    width: 99%;
}
.item.h2 {
    height: auto;
}

JavaScript

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