JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div id="first">
  First Div
</div>

<div id="second">
  Second Div
</div>

<div id="third">
  Third Div
</div>

<div id="four">
  Reset
</div>

CSS

#first {
  position: absolute;
  left: 2px;
  color: white;
  padding: 5px;
  background-color: black;
  width: 150px;
  height: 45px;
}

#second {
  position: absolute;
  left: 2px;
  color: white;
  padding: 5px;
  background-color: yellowgreen;
  width: 150px;
  height: 45px;
}

#third {
  position: absolute;
  left: 2px;
  color: white;
  padding: 5px;
  background-color: orangered;
  width: 150px;
  height: 45px;
}

#four {
  position: absolute;
  left: 2px;
  color: white;
  padding: 5px;
  background-color: blue;
  width: 150px;
  height: 45px;
}

JavaScript

$(document).ready(function() {
  //ENTRANCE
  $("#first").css("top", -1000);
  setTimeout(function() {
    $("#first").animate({
      top: 10
    }, 400);
  }, 200);

  $("#second").css("top", -1000);
  setTimeout(function() {
    $("#second").animate({
      top: 10 + 45 + 15
    }, 400);
  }, 400);

  $("#third").css("top", -1000);
  setTimeout(function() {
    $("#third").animate({
      top: 10 + 45 + 45 + 30
    }, 400);
  }, 600);

  $("#four").css("top", -1000);
  setTimeout(function() {
    $("#four").animate({
      top: 10 + 45 + 45 + 45 + 45
    }, 400);
  }, 800);

  //EXIT
  $('#first').on('click', function() {
    $('#first').toggle();
   $('#second').animate({top: 5}, 400);
  });

  $('#second').on('click', function() {
    $('#second').toggle();
    $('#third').animate({top: 5}, 400);
  });

  $('#third').on('click', function() {
    $('#third').toggle();
    $('#four').animate({top: 5}, 400);
  });
  
  $('#four').on('click', function() {
    window.location.reload();
  });
});