JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>

<script type="text/javascript" src="../jquery-1.6.2.js">
</script>

<script type="text/javascript">

$(function(){
    
    var mouse = { 
            start : {}
        },
        touch = document.ontouchmove !== undefined,
        viewport = {
            x: -10, 
            y: 20, 
            el: $('#cube')[0],
/*             bee: $('.pX img')[0], */
            move: function(coords) {
                if(coords) {
                    if(typeof coords.x === "number") this.x = coords.x;
                    if(typeof coords.y === "number") this.y = coords.y;
                }
    
/*                 this.bee.style.webkitTransform = "rotateX(-"+this.x+"deg) rotateY(-"+this.y+"deg)"; */
                this.el.style.webkitTransform = "rotateX("+this.x+"deg) rotateY("+this.y+"deg)";
            },
            reset: function() {
                this.move({x: 0, y: 0});
            }
        };
        
    viewport.duration = function() {
        var d = touch ? 50 : 500;
        viewport.el.style.webkitTransitionDuration = d + "ms";
        return d;
    }();
    
    $(document).keydown(function(evt) {
        switch(evt.keyCode)
        {    
            case 37: // left
                viewport.move({y: viewport.y - 90});
                break;
            
            case 38: // up
                evt.preventDefault();
                viewport.move({x: viewport.x + 90});                
                break;
            
            case 39: // right
                viewport.move({y: viewport.y + 90});
                break;
                
            case 40: // down
                evt.preventDefault();
                viewport.move({x: viewport.x - 90});
                break;
                
            case 27: //esc
                viewport.reset();
                break;
                
            default:
                break;
        };    
   ...