JSFiddle - React, Tailwind, and code Playground

HTML

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

CSS

div {
    width:20px;
    height:20px;
    position:absolute;
}
#one {
    top:0px;
    left:0px;
    background-color:red;
}
#two {
    top:22px;
    left:0px;
    background-color:yellow;
}
#three {
    top:44px;
    left:0px;
    background-color:blue;
}

JavaScript

function go(id, c) {
    var d = $.Deferred();
    var x = $("#" + id).animate({
        left: "300px"
    }, 800, function () {
        d.resolve();
    });

    return d;
}

go("one").then(go.bind($, "two")).then(go.bind($, "three"));