JSFiddle - React, Tailwind, and code Playground

by nottrobin

HTML

<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<div class="container" id="cont">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
</div>

CSS

.container {
    border: 1px solid black;
    width: 300px;
    overflow: hidden;
    resize: both;
}
.box {
    float: left;
    background-color: lightblue;
    margin: 10px;
    width: 80px;
}
.box:nth-child(odd) {height: 100px;}
.box:nth-child(even) {height: 60px;}
p {
    padding: 1em;
}

JavaScript

$('#cont').masonry();