JSFiddle - React, Tailwind, and code Playground

by mrqwest

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<div id="masonry">
    <section class="element">
        <p>One</p>
    </section>
    <section class="element">
        <p>Two</p>
    </section>
    <section class="element">
        <p>Three</p>
    </section>
    <section class="element">
        <p>Four</p>
    </section>
    <section class="element">
        <p>Five</p>
    </section>
    <section class="element">
        <p>Six</p>
    </section>
    <section class="element">
        <p>Seven</p>
    </section>
    <section class="element">
        <p>Eight</p>
    </section>
    <section class="element">
        <p>Nine</p>
    </section>
    <section class="element">
        <p>Ten</p>
    </section>
    <section class="element">
        <p>Eleven</p>
    </section>
    <section class="element">
        <p>Twelve</p>
    </section>
</div>

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

.element {
    width: 30%;
    border:1px solid #e24234;
    margin:0.5rem;
    padding: 0.5rem;
    text-align: center;
}

JavaScript

$(".element").each(function () {
    var homeHeightMin = 200;
    var homeHeightMax = 350;
    var randHeight = Math.floor(Math.random() * (homeHeightMax - homeHeightMin + 1)) + homeHeightMin;
    $(this).css('height', randHeight);
});

$('#masonry').masonry({
    itemSelector: 'section',
    gutterWidth: 16
});