JSFiddle - React, Tailwind, and code Playground

by dreamdealer

HTML

<div id="chrome">
  <div id="mask"></div>
  <div id="shadow"></div>
  <div id="green"></div>
  <div id="red"></div>
  <div id="yellow"></div>
  <div id="green2"></div>
</div>

CSS

.explode {
  background: #eaf3d2;
}
.explode #chrome  {
  -o-transform: rotateX( 60deg ) rotateZ( 1deg  ) translateY( 300px ) scale(.8);
  -moz-transform: rotateX( 60deg ) rotateZ( 1deg  ) translateY( 300px ) scale(.8); 
  -webkit-transform: rotateX( 60deg ) rotateZ( 1deg  ) translateY( 300px ) scale(.8); 
  transform: rotateX( 60deg ) rotateZ( 1deg  ) translateY( 300px ) scale(.8); 
}
.explode #shadow {
  opacity: 1;
}
.explode #mask {
  -o-transform: translateY(-600px);
  -moz-transform: translateY(-600px);
  -webkit-transform: translateY(-600px);
  transform: translateY(-600px);
  opacity: .7;
}
.explode #yellow { 
  -o-transform: translateY(-0px);
  -moz-transform: translateY(-0px);
  -webkit-transform: translateY(-0px);
  transform: translateY(-0px); 
  box-shadow: 5px 30px 30px rgba(0,0,0,.3);
}
.explode #red { 
  -o-transform: translateY(-50px) rotate(-120deg);
  -moz-transform: translateY(-50px) rotate(-120deg);
  -webkit-transform: translateY(-50px) rotate(-120deg);
  transform: translateY(-50px) rotate(-120deg);
  box-shadow: -40px -20px 30px rgba(0,0,0,.3);
}
.explode #green { 
  -o-transform: translateY(-100px) rotate(-240deg);
  -moz-transform: translateY(-100px) rotate(-240deg);
  -webkit-transform: translateY(-100px) rotate(-240deg);
  transform: translateY(-100px) rotate(-240deg); 
  box-shadow: 40px -30px 30px rgba(0,0,0,.3);
}
.explode #green2 {
  opacity: .7;
  -o-transform: translateY( -120px ) translateX( -20px ); 
  -moz-transform: translateY( -120px ) translateX( -20px ); 
  -webkit-transform: translateY( -120px ) translateX( -20px ); 
  transform: translateY( -120px ) translateX( -20px ); 
  box-shadow: 10px 40px 30px rgba(0,0,0,.4);
}

* {
  -o-transition: all 1s;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
#chrome {
  perspective: 600px;
  position: absolute;
  left: 50%;
  margin-left: -309px;
  top: 68px;
  width: 617px;
  height: 617px;
}
#shadow {
  opacity: 0;
  position: absolute;
  width:...

JavaScript

$(document).ready(function(){
    $('body').click(function(){
        $(this).toggleClass('explode');
    });
});