JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>
<div id="container">
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item w2 h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item w2"></div>
  <div class="item h2"></div>
  <div class="item"></div>
  <div class="item h2"></div>
</div>

CSS

#container {
  border:1px dotted black;
    padding: .3em;
}

.item {
    width: 60px;
    height: 60px;
 
    margin: 5px;
    background: red;
     
}

.item.w2 {
    width: 130px;
      background: blue; 
}

.item.h2 {
    height: 130px;  background:green;
}

JavaScript

$( function() {

    $('#container').masonry({
        itemSelector: '.item',
    
    });

});