JSFiddle - React, Tailwind, and code Playground
HTML
<script src=" https://cdnjs.cloudflare.com/ajax/libs/masonry/3.2.2/masonry.pkgd.js"></script>
<div class="cont" id="container">
<div class="item">
1item
</div>
<div class="item" style="background: lime">
2item sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyj
</div>
<div class="item">
3item
</div>
<div class="item" style="background: cyan">
4item sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyj
</div>
<div class="item" style="background: green">
5item
</div>
<div class="item">
6item sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyj
</div>
<div class="item" style="background: lime">
7item
</div>
<div class="item">
8item sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg thrhyjitem sf rgeg...
CSS
#container{
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
}
#container .item{
width: 33.3%;
background: red;
float: left;
}
JavaScript
$( document ).ready(function() {
$('#container').masonry({
itemSelector: '.item',
});
});