JSFiddle - React, Tailwind, and code Playground

by gopi1410

HTML

<div id="earth" class="common"> </div>
<div id="crack" class="common"> </div>

CSS

.common {
    position: fixed;
    width: 260px;
    height: 260px;
}

#earth {
   background: url('https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg');
    background-size:100% 100%;
}

#crack {
  background: url('https://images.pexels.com/photos/2422/sky-earth-galaxy-universe.jpg');
    background-size:100% 100%;
  display:none;
}

JavaScript

$(function() {
   $('#crack').slideDown(800); 
    setTimeout(function() {
         $('#earth').hide('explode', {pieces: 16}, 2000);
        $('#crack').hide('explode', {pieces: 16}, 2000);
    },1000)
});