JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<article>
    <div class="tile blue"><p>1</p></div>
  <div class="tile black"><p>2</p></div>
  <div class="tile tall yellow"><p>3</p></div>
  <div class="tile grey"><p>4</p></div>
  <div class="tile wide red"><p>5</p></div>
  <div class="tile green"><p>6</p></div>
  <div class="tile grey"><p>7</p></div>
  <div class="tile blue"><p>8</p></div>
  <div class="tile green"><p>9</p></div>
</article>

CSS

article .tile {
    display: block;
    float: left;

    width: 100px;
    height: 100px;
    
    font-size: 10px;
    
    color: #fff;
}
article .tile.wide {
    width: 200px;
    height: 100px;
}
article .tile.tall {
    width: 100px;
    height: 200px;
}
div p {
    color: white;
    font-size: 3em;
    font-weight: 700;
}
.tile.yellow { background: yellow; }
.tile.red { background: red; }
.tile.blue { background: blue; }
.tile.black { background: black; }
.tile.grey { background: grey; }
.tile.green { background: green; }

JavaScript

$('article').isotope({
    itemSelector : '.tile',
    masonry: {
        columnWidth: 100
    }
});