JSFiddle - React, Tailwind, and code Playground

HTML

<DIV ID="GRAPHICS" class="graphics_start" style="

margin-left:300px;
width:690px;
position:relative;
z-index:1;
float:left;
text-align:left;">


<DIV id="level4" style="position:relative;top:0px;left:0px;z-index:4;">

<div class="spacecontainer_main">
<div id="planet" class="spacelayer_main planet" style="width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/planet.png"/>
</div>
</div></DIV>

<DIV id="level3" style="position:absolute;top:0px;left:0px;z-index:3;">

<div class="spacecontainer_main">
<div id="nebula" class="spacelayer_main nebula" style="width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/nebula.png"/>
</div>
</div></DIV>

<DIV id="level2" style="position:absolute;top:0px;left:0px;z-index:2;">

<div class="spacecontainer_main">
<div id="light" class="spacelayer_main light" style="width:450px;height:450px;float:left;">
<img src="http://www.klossal.com/portfolio/layers/light.png"/>
</div>
</div></DIV>

<DIV id="level1" style="position:absolute;top:0px;left:0px;z-index:1;">

<div class="spacecontainer_main">
<div id="stars" class="spacelayer_main stars" style="background-color:rgba(0, 0, 0, .5);width:450px;height:450px;float:left;">
<img id="starsimg" src="http://www.klossal.com/portfolio/layers/stars.png"/>
</div>
</div></DIV>


</DIV ID="GRAPHICS">

CSS

p.text_grey_alt_7{
  height:7px;
  letter-spacing:1px;
  font-size:12pt;
  color:#ffffff; 
  font-family:Copperplate Gothic Light, light,  sans-serif;
}

p.text_grey_alt_8{line-height: 17px;
  height:7px;
  letter-spacing:1px;
  font-size:9pt;
  color:#aaaaaa; 
  font-family:Copperplate Gothic Light, light,  sans-serif;
}

.spacelayer_main
{
-webkit-transform-style: preserve-3d;
-webkit-transform:skew(-40deg,0deg);
position: absolute;
border: 0px solid black;
}
.spacecontainer_main
{
position: relative;
height: 450px;
width: 450px;
border: 0px solid black;
perspective:297;
perspective-origin: 10% 10%;
-webkit-perspective:900; /* Safari and Chrome */
-webkit-perspective-origin: 92% 80%; /* Safari and Chrome */
}



.planet
{
    -webkit-transition-property: all; 
    -webkit-transition-duration: 2s;     
    -webkit-transform: 
                   translate3d(-14px, -190px, 3px)
                   scale3d(0.75, 1.0, 0.95)
                   rotate3d(0, 3, 2, 180deg)
                   rotatez(-25deg)
                   rotatey(3deg);
background-color:rgba(0, 0, 0, .5);
}
.nebula
{
-webkit-transition-property: all; 
-webkit-transition-duration: 2s;     
-webkit-transform: 
                   translate3d(-14px, -115px, 3px)
                   scale3d(0.75, 1.0, 0.95)
                   rotate3d(0, 3, 2, 180deg)
                   rotatez(-25deg)
                   rotatey(3deg);
background-color:rgba(0, 0, 0, .5);
}
.light
{
-webkit-transition-property: all; 
-webkit-transition-duration: 2s; 
-webkit-transform: 
                   translate3d(-14px, -40px, 3px)
                   scale3d(0.75, 1.0, 0.95)
                   rotate3d(0, 3, 2, 180deg)
                   rotatez(-25deg)
                   rotatey(3deg);
background-color:rgba(0, 0, 0, .5);
}
.stars
{

-webkit-transition-property: all; 
-webkit-transition-duration: 2s; 
-webkit-transform: 
                   translate3d(-14px, 35px, 3px)
                   scale3d(0.75, 1.0, 0.95)
                  ...