JSFiddle - React, Tailwind, and code Playground

by Parag Bhayani

HTML

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

<div id="second" class='menu'>
  Second Div
</div>

<div id="third" class='menu'>
  Third Div
</div>

<div id="four" class='menu'>
  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
  var elements = $('.menu');
  elements.on('click', function() {
    $(this).toggle();
    var nextEleemnts = $(this).nextAll('.menu');
    for (var i = 0; i < nextEleemnts.length; i++) {
      var topPos = $(nextEleemnts[i]).position().top - 60;
      $(nextEleemnts[i]).animate({
        top: topPos
      }, 400);
    }
  });
  $('#four').on('click', function() {
    window.location.reload();
  });

});