JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<div id="cubeHolder" >
<div id="wrapper">
    <div id="normal">front<br>no transforms on this div</div>
    <div style="background-color: blue;" id="topface">top</div>
    <div style="background-color: yellow;" id="bottomface">bottom</div>
    <div style="background-color: purple;" id="leftface">left</div>
    <div style="background-color: red;" id="backface">back</div>
</div>
</div>

CSS

#cubeHolder{
    position:relative;
    width:200px;
    height:200px;
    left:100px;
    top:100px;
    
}

#wrapper {
    position: relative;
    width:200px;
    height:200px;
}
#wrapper div {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    z-index:1;
    opacity:0.5;
}

#normal{
    background-color:green;
    
}

#wrapper div#leftface {
   
}
#wrapper div#topface {
   
}
#wrapper div#bottomface {
   
}

JavaScript

var wrapper = $('#wrapper');
TweenLite.set("#cubeHolder", {perspective:1800});
TweenLite.set($('#wrapper'), {transformStyle:"preserve-3d"
});



var topface = '#topface';
var bottomface = '#bottomface';
var leftface = '#leftface';
var backface = '#backface';

TweenLite.set([topface, bottomface, leftface, backface], {transformOrigin:"50% 50% -100"})

TweenLite.set(topface, {
    rotationX: "90"
});
TweenLite.set(bottomface, {
    rotationX: "270"
});
TweenLite.set(leftface, {
    rotationY: "90"
});

TweenLite.set(backface, {z:-200});

var tl = new TimelineLite()
//spin cube around center. transformOrigin: left, top, z
tl.to(wrapper, 5, {rotationY:360, transformOrigin:"50% 50% -100"})
.to(wrapper, 5, {rotationX:360, transformOrigin:"50% 50% -100"}, "-=2.5")
.to(wrapper, 2, {rotationY:-360, rotationX:360, transformOrigin:"50% 50% -100"})
.to(wrapper, 2, {rotationY:360, rotationX:720, transformOrigin:"50% 50% -100"})