JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Juego Pong</title>
    <script type="text/javascript">
    
    var X1 = 0, Y1 = 40, X2 = 110, Y2 = 0;
    var canvas = null, ctx = null;
    var PAUSE = true;
    var lastKey = null;
    
    window.addEventListener('load',function(){canvas = document.getElementById('canvas');canvas.style.background = "#000";ctx = canvas.getContext('2d');
    paint(ctx);ejecutar();},false);
    
    document.addEventListener('keydown',function(evt){lastKey = evt.keyCode;ejecutar();},false);
    
    function paint(ctx){
    ctx.fillStyle = "#F00";
    ctx.fillRect(0,0,10,60);
    ctx.fillStyle = "#0F0";
    ctx.fillRect(X1,Y1,10,20);
    
    ctx.fillStyle = "#F00";
    ctx.fillRect(110,0,10,60);
    ctx.fillStyle = "#0F0";
    ctx.fillRect(X2,Y2,10,20);
    }
        
    function ejecutar(){
    
        if(lastKey == 13)
        PAUSE = !PAUSE;
        
        if(PAUSE)
        {
            document.getElementById("pause").innerHTML = "PAUSE";
            
        }
        else
        {
            document.getElementById("pause").innerHTML = "";
        
            if(lastKey == 37)
            {
                if(Y1 > 0)
                Y1 -= 2;
                ctx.fillStyle = "#F00";
                ctx.fillRect(0,0,10,60);
                ctx.fillStyle = "#0F0";
                ctx.fillRect(X1,Y1,10,20);
            }
                
            if(lastKey == 39)
            {
                    if(Y1 < 40)
                    Y1 += 2;
                    ctx.fillStyle = "#F00";
                    ctx.fillRect(0,0,10,60);
                    ctx.fillStyle = "#0F0";
                    ctx.fillRect(X1,Y1,10,20);
            }
                
            if(lastKey == 38)
            {
                if(Y2 > 0)
                Y2 -= 2;
                ctx.fillStyle = "#F00";
                ctx.fillRect(110,0,10,60);
                ctx.fillStyle = "#0F0";
               ...