JSFiddle - React, Tailwind, and code Playground

by Harry Potter

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<div class="container">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
    <div class="box box-4"></div>
    <div class="box box-5"></div>
    <div class="box box-6"></div>
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
    <div class="box box-4"></div>
    <div class="box box-5"></div>
    <div class="box box-6"></div>
</div>

CSS

*, html {
    margin:0;
    padding:0;
}
.container {
    width: 650px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
}

.box {
    width: 192px;
    margin: 2.5px;
    border: 1px solid #c8c8c8;
    float: left;
    background-color: green;       
}

.box-1, .box-3, .box-5 {
    height: 120px;
}

.box-2, .box-4, .box-6 {
    height: 100px;
}

.box-5 {
    background-color: red !important;
}

JavaScript

$('.container').masonry();