JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div id="spaceManHolder">
                             <div id="spaceMan">
                                 <div class="spaceOB" style="z-index: 18; background-color: rgb(222, 40, 40); visibility: visible; zoom: 1; opacity: 0.8; width: 258px; height: 162px; left: 91px; top: 54px; "></div>
                                 <div class="spaceOB" style="z-index: 17; background-color: rgb(222, 161, 40); visibility: visible; zoom: 1; opacity: 0.7; width: 226px; height: 142px; left: 107px; top: 44px; "></div>
                                 <div class="spaceOB" style="z-index: 16; background-color: rgb(161, 222, 40); visibility: visible; zoom: 1; opacity: 0.6; width: 194px; height: 122px; left: 123px; top: 36px; "></div>
                                 <div class="spaceOB" style="z-index: 15; background-color: rgb(40, 222, 40); visibility: visible; zoom: 1; opacity: 0.5; width: 162px; height: 63px; left: 138px; top: 30px; "></div>
                                 <div class="spaceOB" style="z-index: 20; background-color: rgb(40, 222, 161); visibility: visible; zoom: 1; opacity: 1; width: 323px; height: 203px; left: 60px; top: 80px; "></div>
                                 <div class="spaceOB" style="z-index: 19; background-color: rgb(40, 161, 222); visibility: visible; zoom: 1; opacity: 0.9; width: 291px; height: 183px; left: 76px; top: 66px; "></div>
                             </div>
                             <div id="spaceHelp" style="visibility: hidden; zoom: 1; opacity: 0; ">Click The front block or try selecting a block from the back</div>
                         </div>

CSS

#spaceManHolder{
       width: 450px;
     height: 500px;
     margin: 40px auto 0px auto;    
     position: relative;
 }
 #spaceMan{
      width: 450px;
     height: 300px;
      position: relative;
 }
 
 #spaceHelp{
     font-size: 10px;
     color: #fff;
     text-align: center;
     opacity: 0;
 }
 
.spaceOB{
    position: absolute;
    width: 100px;
    height: 100px;
    z-index: 100;
}

JavaScript

var spacers = "";

        function loadDemo(){
            spacers = $("spaceMan").getElements(".spaceOB");
            intSpace(); 
        }
        
          function intSpace(){
              
    
            spacers.addEvents({
                'mouseover': function(){
                    if(this.getStyle("z-index") != 20){
                        this.setStyle("top", parseInt(this.getStyle("top"))-2);
                    }
                },
                'mouseout': function(){
                    if(this.getStyle("z-index") != 20){
                        this.setStyle("top", parseInt(this.getStyle("top"))+2);
                    }
                },
                'click': function(){
                 
                    doSpace(this);
                }
            });


              spacers.each(function(item, index){
     
                    var color = [index*40, 82, 87].hsbToRgb();
                 
                    spacers[index].setStyles({
                 
                        "z-index": 20-index,
                        "background-color": color

                    });
                    
                    spacers[index].set('morph', {duration: 1000-(index*100), transition: 'Sine:out', onComplete: function(){
                                       
                                  }});
                     spacers[index].morph({opacity: [0, (100-(index*10))/100], width: 323-(index*32.3), height: 203-(index*20.3), left: 60+((index*23.5)/1.5), top: 80-(index*(15-(index)))});
                 

                 
                
            }); 
                 setTimeout(function(){$("spaceHelp").fade([0,1]);}, 1000);
            
     
  }
  
  
  function doSpace(el){
       
          $("spaceHelp").fade(0);
          
          var positionOfClicked = 20 - el.getStyle("z-index"); 
 
          var topPos = 0; 
          
          spacers.each(function(item, index){
              var zIndexi =...