JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<title>Music Visualiser</title>
</head>
<body>
<div class="visualiser">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</body>
</html>
CSS
.visualiser {
line-height: 200px;
}
.bar {
width: 30px;
height: 200px;
margin-right: -2px;
background-color: #2989d8;
vertical-align: bottom;
}
JavaScript
function genHeight(bar) {
var minHeight = 20;
var maxHeight = 150;
var barHeight = Math.ceil((Math.random()*maxHeight)+minHeight);
var time = barHeight * 5;
bar.animate({
height: barHeight
}, time, function() {
genHeight($(this));
});
}
$(document).ready(function(){
$(".bar").each(function(i) {
genHeight($(this));
});
});