JSFiddle - React, Tailwind, and code Playground

by fred02138

HTML

<body>
<div class="_onload">
    <div id="text">
    	<span id="l-1">A</span>
	    <span id="l-2">B</span>
	    <span id="l-3">C</span>
	    <span id="l-4">D</span>
	    <span id="l-5">E</span>
    </div>
</div>
</body>

CSS

html{

	height: 100%;
}

body{
	margin:0;
	padding:0;
	transition: width 2s;
	height: 100%;
	overflow-y:hidden;
	background-color: #000;
	background-size: cover;
}


._onload{
	background-color:#f00;
	display:none;
	overflow-x:hidden;
	overflow-y:hidden; 
	position: static;
    height: 100%;
}

#text {
    position: absolute;
    top: 85%;
    right: 15%;
}

    #l-1, #l-2, #l-3, #l-4, #l-5{
    	font-family: 'Economica', sans-serif;
	  	font-size: 36px;
	  	font-weight: bold;
	    color:#000;
	  }    


	#l-1{
	  
	 	-webkit-transition: all 1s ease-in-out;
				   -moz-transition: all 1s ease-in-out;
				   	 -o-transition: all 1s ease-in-out;
					  	transition: all 1s ease-in-out;
	  }
	  #l-2{
	  	
	  	-webkit-transition: all 1.2s ease-in-out;
				   -moz-transition: all 1.2s ease-in-out;
				   	 -o-transition: all 1.2s ease-in-out;
					  	transition: all 1.2s ease-in-out;
	  }
	  #l-3{
	  	
	  	-webkit-transition: all 1.6s ease-in-out;
				   -moz-transition: all 1.6s ease-in-out;
				   	 -o-transition: all 1.6s ease-in-out;
					  	transition: all 1.6s ease-in-out;
	  }
	   #l-4{
	  	
	  	-webkit-transition: all 2s ease-in-out;
				   -moz-transition: all 2s ease-in-out;
				   	 -o-transition: all 2s ease-in-out;
					  	transition: all 2s ease-in-out;
	  }
	  	#l-5{
	  	
	 	-webkit-transition: all 2.5s ease-in-out;
				   -moz-transition: all 2.5s ease-in-out;
				   	 -o-transition: all 2.5s ease-in-out;
					  	transition: all 2.5s ease-in-out;
	  }

JavaScript

$('._onload').show();
	$('._onload #l-1').css("top","85%");
	$('._onload #l-2').css("left","84.102%");
	$('._onload #l-3').css("bottom","10.996%");
	$('._onload #l-4').css("right","13.592%");
	$('._onload #l-5').css("top","85%");