JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="outer">
     <li style="height:100%;width:1px">&nbsp;</li>
    <li class="inner">
        <div>height:'0%'</div>
    </li>
    <li class="inner">
        <div>height:'0%'</div>
    </li>
    <li class="inner">
        <div>height:'0%'</div>
    </li>
    <li class="inner">
        <div>height:'0%'</div>
    </li>
    <li class="inner">
        <div>height:'0%'</div>
    </li>
    <li class="inner">
        <div>height:'0%'</div>
    </li>
    <li class="inner">
        <div>height:'0%'</div>
    </li>
</ul>

CSS

#outer {
    border: 2px solid #CCCCCC;
    height: 140px;
    overflow: hidden;
    padding: 0;
    position: relative;
}

#outer li {
    border: 1px solid lightgray;
    display: inline-block;
    height: 99%;
    overflow: hidden;
    position: inherit;
    width: 15px;
    background-color:green;
}

#outer li div{    
    bottom: 0;
    height: 0px;
    position: absolute;   
}

JavaScript

function reload(){
    $('.inner').each(function(){
        $(this).animate({
        height: +Math.floor(Math.random() * 100) + "%"
        }, 500);
    });
};

setInterval(reload, 1000);