JSFiddle - React, Tailwind, and code Playground

HTML

<div id="shape">1</div>
<div id="shape2">2</div>
<div id="shape3">3</div>
<div id="shape4">4</div>

CSS

#shape,
#shape2,
#shape3,
#shape4 {
  background-color: #00BFFF;
  width: 100px;
  height: 100px;
  top: 0;
  position: relative;
  display: inline-block;
  transition: top 1s
}

JavaScript

new Promise(function(resolve, reject) {
  $("#shape").css({
    top: 100
  });
  setTimeout(function() {
    resolve();
  }, 1000);
}).then(function() {
  return new Promise(function(resolve, reject) {
    $("#shape2").css({
      top: 100
    });
    setTimeout(function() {
      resolve();
    }, 1000);
  });
}).then(function() {
  return new Promise(function(resolve, reject) {
    $("#shape3").css({
      top: 100
    });
    setTimeout(function() {
      resolve();
    }, 1000);
  });
}).then(function() {
  return new Promise(function(resolve, reject) {
    $("#shape4").css({
      top: 100
    });
    setTimeout(function() {
      resolve();
    }, 1000);
  });
});