JSFiddle - React, Tailwind, and code Playground

by SLaks

HTML

<div class="Container"></div>

CSS

.Container {
    width: 78px;
    border: inset 1px #000A7F;
    overflow: auto;
    font-family: "Calibri" sans-serif;
    background-color: #000A7F;
    background-image: -moz-linear-gradient(top, #000A7F, #000A53);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #000A7F),color-stop(1, #000A53));
    background-image: -webkit-linear-gradient(#000A7F, #000A53);
    background-image: linear-gradient(top, #000A7F, #000A53);
}
.Container .Item {
    text-align: center;
    margin: 2px;
    width: 20px;
    float: left;
    display: none;
    background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#fff));
    background-color: #eee;
    background: -moz-linear-gradient(bottom, #bbd, #fff);
    border: outset 1px #000A53;
}

JavaScript

var i = 0;
var timer = setInterval(
    function() {
        var item = $('<div class="Item">' + i + '</div>')
            .height(20 + (i * 5) % 100)
            .appendTo('.Container')
            .slideDown(1500);
        if (++i > 60) clearInterval(timer);
    }, 1000
);