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 style="width: 200px; height: 200px; margin: 0px auto;" id="wrapper">
    <div style="background-color: blue;" id="topface"></div>
    <div style="background-color: yellow;" id="bottomface"></div>
    <div style="background-color: purple;" id="leftface"></div>
</div>

CSS

#wrapper {
    position: relative;
}
#wrapper div {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 200px;
    z-index:1;
}
#wrapper div#leftface {
    top: 200px;
    left: -100px;
}
#wrapper div#topface {
    top: 100px;
    z-index:99;
    left: 0px;
}
#wrapper div#bottomface {
    top: 300px;
    left: 0;
}

JavaScript

var wrapper = $('#wrapper');
TweenLite.set($('#wrapper'), {
    perspective: 600
});

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

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

setTimeout(function () {
    var tl = new TimelineLite();

    tl.addLabel("1st rotation");
    tl.add([
    new TweenLite(leftface, 1, {
        z: '+=100',
        rotationY: "+=90",
        left: '+=100px',
        transformOrigin: 'left left left',
        ease: Linear.easeNone
    }),
    new TweenLite(topface, 1, {
        rotationY: "+=90",
        ease: Linear.easeNone
    }),
    new TweenLite(bottomface, 1, {
        rotationY: "+=90",
        ease: Linear.easeNone
    })],
    0);
    tl.addLabel("2nd rotation");
    tl.add([
    new TweenLite(leftface, 1, {
        z: '-=100',
        rotationY: "+=90",
        left: '+=100px',
        transformOrigin: 'left left left',
        ease: Linear.easeNone
    }),
    new TweenLite(topface, 1, {
        rotationY: "+=90",
        ease: Linear.easeNone
    }),
    new TweenLite(bottomface, 1, {
        rotationY: "+=90",
        ease: Linear.easeNone
    })],
    1);
    tl.addLabel("3rd rotation");
    tl.add([
    new TweenLite(leftface, 1, {
        z: '-=100',
        rotationY: "+=90",
        left: '-=100px',
        transformOrigin: 'left left left',
        ease: Linear.easeNone
    }),
    new TweenLite(topface, 1, {
        rotationY: "+=90",
        ease: Linear.easeNone
    }),
    new TweenLite(bottomface, 1, {
        rotationY: "+=90",
        ease: Linear.easeNone
    })],
    2);

    tl.addLabel("4th rotation");
    tl.add([
    new TweenLite(leftface, 1, {
        z: '+=100',
        rotationY: "+=90",
        left: '-=100px',
        transformOrigin: 'left left left',
        ease: Linear.easeNone
    }),
    new TweenLite(topface, 1, {
        rotationY: "+=90",
      ...