JSFiddle - React, Tailwind, and code Playground

by Zer00ne Null

HTML

<div class="collection">
    <div style="height:50px">1</div>
    <div style="height:80px">2</div>
    <div style="height:60px">3</div>
    <div style="height:40px">4</div>
    <div style="height:80px">5</div>
    <div style="height:50px">6</div>
    <div style="height:60px">7</div>
    <div style="height:40px">8</div>
</div>

CSS

/* Defaults */
 html {
    box-sizing: border-box;
    font: 400 16px/1.45'Source Code Pro';
}
*, *:before, *:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
}
body {
    width: 100vw;
    height: 100vh;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 .collection {
    /* Flexbox Properties */
    /* https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties */
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    outline: 1px dotted blue;
    padding: 5px;
    overflow: hidden;
    /* Limited height to coincide with examples */
    height: 100%;
    max-height: 250px;
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
}
.collection > div {
    margin: 0 15px 15px 0;
    width: calc((100% - 2 * 15px) / 3);
    width: calc(33% - 14px);
}

JavaScript

$(function () {

    $('.collection>div').each(function (n) {
        $(this).css('backgroundColor', 'hsla(60, ' + n * 10 + '%, 45%, 1)');
    });

});