JSFiddle - React, Tailwind, and code Playground

HTML

<!-- example A: normal-->
<div class="eq">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

<!-- example B: skewed-->
<div class="eq2">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</div>

CSS

.bar {
    background-color: green;
    width:7px;
    height:15px;
    display: inline-block;
    vertical-align: bottom;
}

.eq2 .bar {
    background-color: green;
    width:7px;
    height:15px;
    display: inline-block;
    vertical-align: bottom;
    
    -moz-transform: rotate(-25deg);  
    -o-transform: rotate(-25deg);  
    -webkit-transform: rotate(-25deg);  
    -ms-transform: rotate(-25deg);  
    transform: rotate(-25deg);  
    filter: progid:DXImageTransform.Microsoft.Matrix( 
        M11=0.9063077870366499, M12=0.42261826174069944, M21=-0.42261826174069944, M22=0.9063077870366499, sizingMethod='auto expand');
    zoom: 1;
    
     -moz-transform: skew(20deg);
    -webkit-transform: skew(20deg);
    -ms-transform: skew(20deg);

}

JavaScript

function fluctuate(bar) {
    var hgt = Math.random() * 10;
    hgt += 1;
    var t = hgt * 30;
    
    bar.animate({
        height: hgt
    }, t, function() {
        fluctuate($(this));
    });
}

$(".bar").each(function(i) {
    fluctuate($(this));
});