JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="line-3">+</div>
<div id="line-4">+</div>
<div id="line-5">+</div>
<div id="line-6">+</div>
<div id="line-7">+</div>
<div id="line-8">+</div>
<div id="line-9">+</div>
<div id="line-10">+</div>
<div id="line-11">+</div>
<div id="line-12">+</div>
<div id="line-13">+</div>
<div id="line-14">+</div>
<div id="line-15">+</div>
<div id="line-16">+</div>
</body>

CSS

body {height: 600px; background-color: #999}
#line-3 {
    position:absolute;
    width:100%;
    left:20px;
    top:0px;
}
#line-4 {
    position:absolute;
    width:100%;
    left:30px;
    top:0px;
}
#line-5 {
    position:absolute;
    width:100%;
    left:40px;
    top:0px;
}
#line-6 {
    position:absolute;
    width:100%;
    left:55px;
    top:0px;
}
#line-7 {
    position:absolute;
    width:100%;
    left:70px;
    top:0px;
}
#line-8 {
    position:absolute;
    width:100%;
    left:85px;
    top:0px;
}
#line-9 {
    position:absolute;
    width:100%;
    left:100px;
    top:0px;
}
#line-10 {
    position:absolute;
    width:100%;
    left:115px;
    top:0px;
}
#line-11 {
    position:absolute;
    width:100%;
    left:130px;
    top:0px;
}
#line-12 {
    position:absolute;
    width:100%;
    left:145px;
    top:0px;
}
#line-13 {
    position:absolute;
    width:100%;
    left:160px;
    top:0px;
}
#line-14 {
    position:absolute;
    width:100%;
    left:175px;
    top:0px;
}
#line-15 {
    position:absolute;
    width:100%;
    left:195px;
    top:0px;
}
#line-16 {
    position:absolute;
    width:100%;
    left:210px;
    top:0px;
}

JavaScript

$(document).ready(function(){
   var bodyHeight = $('body').height();
   var footerOffsetTop = $('#line-3').offset().top;
   var topToBottom = bodyHeight -footerOffsetTop;
    
  $('#line-3').css({top:'auto',bottom:topToBottom});
  $("#line-3").delay(100).animate({
    bottom: '100px',
    }, 2200);  
  $('#line-4').css({top:'auto',bottom:topToBottom});
  $("#line-4").delay(108).animate({
    bottom: '100px',
    }, 2200);  
  $('#line-5').css({top:'auto',bottom:topToBottom});
  $("#line-5").delay(145).animate({
    bottom: '100px',
    }, 2200);  
  $('#line-6').css({top:'auto',bottom:topToBottom});
  $("#line-6").delay(119).animate({
    bottom: '100px',
    }, 2200); 
  $('#line-7').css({top:'auto',bottom:topToBottom});
  $("#line-7").delay(115).animate({
    bottom: '100px',
    }, 2200); 
      $('#line-8').css({top:'auto',bottom:topToBottom});
  $("#line-8").delay(176).animate({
    bottom: '100px',
    }, 2100); 
      $('#line-9').css({top:'auto',bottom:topToBottom});
  $("#line-9").delay(13).animate({
    bottom: '100px',
    }, 2200); 
      $('#line-10').css({top:'auto',bottom:topToBottom});
  $("#line-10").delay(12).animate({
    bottom: '100px',
    }, 2200); 
      $('#line-11').css({top:'auto',bottom:topToBottom});
  $("#line-11").delay(11).animate({
    bottom: '100px',
    }, 2000); 
      $('#line-12').css({top:'auto',bottom:topToBottom});
  $("#line-12").delay(10).animate({
    bottom: '100px',
    }, 2100); 
      $('#line-13').css({top:'auto',bottom:topToBottom});
  $("#line-13").delay(11).animate({
    bottom: '100px',
    }, 600); 
      $('#line-14').css({top:'auto',bottom:topToBottom});
  $("#line-14").delay(14).animate({
    bottom: '100px',
    }, 700); 
          $('#line-15').css({top:'auto',bottom:topToBottom});
  $("#line-15").delay(14).animate({
    bottom: '100px',
    }, 800); 
          $('#line-16').css({top:'auto',bottom:topToBottom});
  $("#line-16").delay(24).animate({
    bottom: '100px',
    }, 900); 
})