JSFiddle - React, Tailwind, and code Playground

by CodeMaverick

HTML

<div id="bars"></div>

CSS

#bars {
    display: table-cell;
    border: solid 1px black;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

JavaScript

var bars = document.getElementById('bars'), L = 10+parseInt(Math.random()*30);
for ( var b, h, i=0; i<L; i++ ) {
    h = 20 + parseInt(Math.random() * 80);
    b = document.createElement('div');
    b.style.height = h + 'px';
    bars.appendChild(b);
}