JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>3D Cube</title>
    </head>
    <body>
        
        <section id="container">
            <div id="carousel">
                <div class="face one"></div>    
                <div class="face two"></div>
                <div class="face three"></div>
                <div class="face four"></div>
                <div class="face five"></div>
                <div class="face six"></div>
                <div class="face seven"></div>
                <div class="face eight"></div>
                <div class="face nine"></div>
                <div class="face ten"></div>
                <div class="face oneone"></div>    
                <div class="face onetwo"></div>
                <div class="face onethree"></div>
                <div class="face onefour"></div>
                <div class="face onefive"></div>
                <div class="face onesix"></div>
                <div class="face oneseven"></div>
                <div class="face oneeight"></div>
                <div class="face onenine"></div>
                <div class="face oneten"></div>
                <div class="face twoone"></div>    
                <div class="face twotwo"></div>
                <div class="face twothree"></div>
                <div class="face twofour"></div>
                <div class="face twofive"></div>
                <div class="face twosix"></div>
                <div class="face twoseven"></div>
                <div class="face twoeight"></div>
                <div class="face twonine"></div>
                <div class="face twoten"></div>
                <div class="face threeone"></div>    
                <div class="face threetwo"></div>
                <div class="face threethree"></div>
                <div class="face threefour"></div>
                <div class="face threefive"></div>
                <div class="face threesix"></div>
                <div class="face threeseven"></div>
                <div class="face...

CSS

#container  {
                width: 40px;
                height: 5px;
                margin: 0 auto;
                margin-top:200px;
                position: relative;
                -webkit-transition: -webkit-transform 100ms;
                -webkit-perspective: 500px;
            }
            #carousel  {
                width: 100%;
                height: 100%;
                position: absolute;
                -webkit-transition: -webkit-transform 100ms;
                -webkit-transform-style: preserve-3d;
            }
            .face  {
                filter:alpha(opacity=60);
                opacity:.6;
                margin:0;
                width: 40px;
                height: 5px;
                display: block;
                position: absolute;
                border: 2px solid black;
                webkit-transform-style: -webkit-preserve-3d;
            }
            #carousel .one  {-webkit-transform: rotateX(0deg) translateZ(79px); background-color:blue;}
            #carousel .two  {-webkit-transform: rotateX(3.6deg) translateZ(79px); background-color:green;}
            #carousel .three  {-webkit-transform: rotateX(7.2deg) translateZ(79px); background-color:red;}
            #carousel .four  {-webkit-transform: rotateX(10.8deg) translateZ(79px); background-color:yellow;}
            #carousel .five  {-webkit-transform: rotateX(14.4deg) translateZ(79px); background-color:orange;}
            #carousel .six  {-webkit-transform: rotateX(18deg) translateZ(79px); background-color:indigo;}
            #carousel .seven  {-webkit-transform: rotateX(21.6deg) translateZ(79px); background-color:violet;}
            #carousel .eight  {-webkit-transform: rotateX(25.2deg) translateZ(79px); background-color:purple;}
            #carousel .nine  {-webkit-transform: rotateX(28.8deg) translateZ(79px); background-color:pink;}
            #carousel .ten  {-webkit-transform: rotateX(32.4deg) translateZ(79px); background-color:brown;}
           ...

JavaScript

var keys = {37:0, 38:0, 39:0, 40:0};
            var xAngle = 0, yAngle = 0, yAngle2 = 0, yTrans = 0, xTrans = 0;
            function move (up, down, left, right)  {
                if (left != 0)  {
                    yAngle += 9;
                    yAngle2 += 9
                    if (yAngle2 > 359)  {
                        yAngle2 = 0;
                    }
                    document.getElementById('carousel').style.webkitTransform = "rotateY(" +yAngle+ "deg)";
                }
                if (right != 0)  {
                    yAngle -= 9;
                    yAngle2 -= 9;
                    if (yAngle2 < 0)  {
                        yAngle2 = 360 + yAngle2;
                    }
                    document.getElementById('carousel').style.webkitTransform = "rotateY(" +yAngle+ "deg)";
                }
                if (up != 0)  {
                    if (yAngle2 >= 0 && yAngle2 < 90)  {
                        yTrans -= 12.5*(1-(((yAngle2) / 9) * .1));
                        xTrans -= 12.5*(((yAngle2) / 9) * .1);
                    }
                    else if (yAngle2 >= 90 && yAngle2 < 180){
                        yTrans += 12.5*((((yAngle2%90) / 9) * .1));
                        xTrans -= 12.5*(1-(((yAngle2%90) / 9) * .1));
                    }
                    else if (yAngle2 >= 180 && yAngle2 < 270){
                        xTrans += 12.5*((((yAngle2%90) / 9) * .1));
                        yTrans += 12.5*(1-(((yAngle2%90) / 9) * .1));
                    }
                    else if (yAngle2 >= 270 && yAngle2 < 360){
                        yTrans -= 12.5*((((yAngle2%90) / 9) * .1));
                        xTrans += 12.5*(1-(((yAngle2%90) / 9) * .1));
                    }
                    xAngle += 9;
                    document.getElementById('carousel').style.webkitTransform = "rotateY(" +yAngle+ "deg) rotateX(" + xAngle + "deg)";
                    document.getElementById('container').style.webkitTransform =...