JSFiddle - React, Tailwind, and code Playground

by rafael carvalho

HTML

<div id="preload">
        <div class="fase_1">
            <img src="http://www.matcha.provisorio.ws/images/fase_1.png" alt="Fase1" />
        </div>
        <div class="fase_2">
            <img src="http://www.matcha.provisorio.ws/images/fase_2.png" alt="Fase1" />
        </div>
        <div class="fase_3">
            <img src="http://www.matcha.provisorio.ws/images/fase_3.png" alt="Fase1" />
        </div>
    </div>

CSS

#preload{position:fixed;width:100%;height:100%;z-index:50;overflow:hidden;}
#preload div{position:absolute;top:0;left:0;width:100%;height:100%;display:none;}
#preload div img{height:100%;width:100%;}
#preload{background-color: #2F2727;background-image: url(../images/bg_verde.jpg);background-position: center center;background-repeat: no-repeat;background-size:cover;background: -webkit-gradient(radial, center center, 0, center center, 460, from(#236a0f), to(#133e08));background: -webkit-radial-gradient(circle, #236a0f, #133e08);background: -moz-radial-gradient(circle, #236a0f, #133e08);background: -ms-radial-gradient(circle, #236a0f, #133e08);}

JavaScript

$(document).ready(function () {
    
        $('.fase_1').fadeIn(200);
        $('.fase_2').delay(300).fadeIn(200);
        $('.fase_3').delay(800).fadeIn(200);
    
})