JSFiddle - React, Tailwind, and code Playground

CSS

#img1, #img2, #img3, #img4{
     max-width: 480px;
     background: transparent url('../../img/img1.png') no-repeat;
     background-size: 100%; 
     margin-top: -500%; 
     width: 100%;
     height: 100%;
     z-index: 250;
     margin-left: 0;
 }

 #img2{
     background: transparent url('../../img/img2.png') no-repeat;
     background-size: 100%; 
 }

 #img3{
     background: transparent url('../../img/img3.png') no-repeat;
     background-size: 100%; 
 }

 #img4{
     background: transparent url('../../img/img4.png') no-repeat;
     background-size: 100%; 
     margin-left: -500%;
     position: relative;    
 }

JavaScript

$(document).ready(function(){  
     $("#img1").delay(200).animate({"margin-top":"-10%"}, 2000);        
     $("#img2").delay(200).animate({"margin-top":"-175%"}, 3000);       
     $("#img3").delay(2000).animate({"margin-top":"-62%"}, 1000);   
     $("#img4").delay(1000).animate({"margin-left":"5%"},  3000);
 });