JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<body>
	<div id="articles">
		<div class="article a2"></div>
		<div class="article a3"></div>
		<div class="article a4"></div>
		<div class="article a1"></div>
		<div class="article a5"></div>
		<div class="article a2"></div>
		<div class="article a3"></div>
		<div class="article a3"></div>
		<div class="article a4"></div>
		<div class="article a5"></div>
		<div class="article a6"></div>
		<div class="article a4"></div>
		<div class="article a5"></div>
		<div class="article a6"></div>
		<div class="article a1"></div>
		<div class="article a2"></div>
		<div class="article a1"></div>
		<div class="article a6"></div>
	</div>
</body>

CSS

#articles{
    margin: 0 auto;
}

#articles .article{
    float:left;
    display:block;
    margin: 1px;
    min-width: 23%;
}

.a1{
    background-color: #C9007A;
    height: 200px; 
}
.a2{
    background-color: #97266A;
    height: 400px; 
}
.a3{
    background-color: #83004F;
    height: 150px; 
}
.a4{
    background-color: #A68600;
    height: 250px; 
}
.a5{
    background-color: #1D7373;			
    height: 230px; 
}
.a6{
    background-color: #6B9B00;
    height: 100px; 
}

JavaScript

$(document).ready(function(){
    var $container = $('#articles');
    // initialize
    $container.masonry({
        itemSelector: '.article'
    });
});