JSFiddle - React, Tailwind, and code Playground

by Aman0js

HTML

<div class="fillColor1"></div>
<div class="fillColor2"></div><br/>
<div class="fillColor3"></div><br/>
<button>Click me</button>

CSS

.fillColor1 {
    background: black;
    height: 0;
    margin-left: 24px;
    position: relative;
    width: 3px;
}

.fillColor2 {
    background: black;
    height: 0;
    margin-left: 41px;
    position: relative;
    width: 3px;
}

.fillColor3 {
    background: black;
    height: 0;
    margin-left: 41px;
    position: relative;
    width: 3px;
}

JavaScript

function first(callback) {
     $('.fillColor1').animate({
         height: '50px'
     }, 600, callback);
}

function second(callback2) {
    $('.fillColor2').animate({
         height: '50px'
     }, 600, callback2);
}

function third() {
    $('.fillColor3').animate({
         height: '50px'
     }, 600);
}

$('button').click(function() {
    first(second(third));
});