JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div class="tear" id="tear1"></div>
<div class="tear" id="tear2"></div>
<div class="tear" id="tear3"></div>
<div class="tear" id="tear4"></div>
<div class="tear" id="tear5"></div>

CSS

.tear {background-image: none }

.tear {
	z-index: 1;
	position: absolute;
	width: 20%;
	height: 0%;
	opacity: 0;
	top: 0%;
	background-size: 100%  ; 
}
.tear, .tear.tearIn,  .showTear {transition: all 0.2s ease; -webkit-transition: all 0.2s ease;}

.tearIn {height: 100vh  } 

#tear1 {background-color: #529c9e; left: 0;  }
#tear2 {background-color: #e9518c; left: 20%;}
#tear3 {background-color: #9db62a; left: 40%; }
#tear4 {background-color: #ea633b; left: 60%; }
#tear5 {background-color: #1b3647; left: 80%;} 

.showTear {z-index: 10  ; opacity: 1 }

JavaScript

$(document).ready(function(){

		$(".tear").addClass("showTear");
		
		setTimeout(function(){  $("#tear1").addClass("tearIn");  }, 0);
		setTimeout(function(){  $("#tear2").addClass("tearIn");  }, 100);
		setTimeout(function(){  $("#tear3").addClass("tearIn");  }, 200);
		setTimeout(function(){  $("#tear4").addClass("tearIn");  }, 300);
		setTimeout(function(){  $("#tear5").addClass("tearIn");  }, 400); 
		
		
		 
		
		
		
})