JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/desandro/masonry/raw/master/jquery.masonry.min.js"></script>
<div class="boxes">
  <div class="box b2x2">
    <div>2x2</div>
  </div>
  <div class="box b1x2">
    <div>1x2</div>
  </div>
  <div class="box b1x1">
    <div>1x1</div>
  </div>
  <div class="box b1x1">
    <div>1x1</div>
  </div>
  <div class="box b2x1">
    <div>2x1</div>
  </div>
  <div class="box b1x1">
    <div>1x1</div>
  </div>
  <div class="box b1x3">
    <div>1x3</div>
  </div>
  <div class="box b1x1">
    <div>1x1</div>
  </div>
  <div class="box b2x1">
    <div>2x1</div>
  </div>
</div>

CSS

.boxes {
  padding: 10px;
}

.boxes:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
}

.box {
  float: left;
}

.box div {
  margin: 10px;
  padding: 10px;
  outline: 1px solid rgba(255, 0, 0, 0.75);
  outline-offset: -1px;
  background-color: rgba(255, 0, 0, 0.25);
}

.b3x1,
.b3x2,
.b3x3 {
  width: 99.9%;
}

.b2x1,
.b2x2,
.b2x3 {
  width: 66.6%;
}

.b1x1,
.b1x2,
.b1x3 {
  width: 33.3%;
}

.b2x1 div,
.b1x1 div,
.b3x1 div {
  min-height: 150px;
}

.b2x2 div,
.b1x2 div,
.b3x2 div {
  min-height: 300px;
}

.b2x3 div,
.b1x3 div,
.b3x3 div {
  min-height: 450px;
}

JavaScript

$(function(){

  var $container = $('.boxes'),
      $boxes = $container.find('.box'),
      firstTime = true;

  $(window).smartresize(function(){

    var containerWidth = $container.width(),
        // get number of columns that would be at least 200px
        // extra 20 is for 10px margin on each side
        colCount = Math.floor( containerWidth / 220 ),
        // get width of columns that would fit in current container
        // given number of columns. -20 is to account for 10px margin on each side
        colWidth = ( containerWidth / colCount ) - 20,
        // only animate after first time
        applyStyleFnName = firstTime ? 'css' : 'animate';

    // apply width

    $boxes[ applyStyleFnName ]({ width: colWidth }, { queue: false });

    $container.masonry({
      // add 20 for margin
      columnWidth : colWidth + 20,
      singleMode: true, 
      itemSelector: '.box',
      resizeable: false,
      animate: true
    });

    firstTime = false;

  })
  // trigger a smartresize so masonry initializes on startup
  .smartresize();

});