JSFiddle - React, Tailwind, and code Playground

HTML

<div class="js-masonry grid" data-masonry-options='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.1/masonry.pkgd.min.js"></script>

CSS

.grid-item {
    width: 200px;
}

.grid-item:nth-child(odd) {
    background: red;
    height: 150px;
}

.grid-item:nth-child(even) {
    background: blue;
    height: 200px;
}