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 CX = 55, CY = 30;
    
    var canvas = null, ctx = null;
    
    
    var PAUSE = true;
    var lastKey = null;
    var Top = null, Rt = null;
    var pel = null;
    
    window.addEventListener('load',function(){canvas = document.getElementById('canvas');canvas.style.background = "#000";ctx = canvas.getContext('2d');
    paint(ctx);centro(ctx);Top = true;Rt = true;ejecutar();},false);
    
    document.addEventListener('keyup',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 centro(ctx){
    ctx.fillStyle = "#FFF";
    ctx.rect(CX,CY,5,5);
    ctx.fill();
    }
    
    function pelota(){
        if(CY == 55 || CY == 0)
        Top = !Top;
        
        if(CX == 10 || CX == 105)
        Rt = !Rt;
        
        if(Top)
        {
        CY -= 5;
        }
        else
        {
        CY += 5;
        }
        
        if(Rt)
        {
        CX += 5;
        }
        else
        {
        CX -= 5;
        }
    ctx.clearRect(10,0,100,60);
    ctx.fillStyle = "#000";
    ctx.fillRect(10,0,100,60);
    ctx.fillStyle = "#FFF";
    ctx.fillRect(CX,CY,5,5);
    
    }
        
    function ejecutar(){
        if(lastKey == 13)
        PAUSE = !PAUSE;
        
        if(PAUSE)
        {
            document.getElementById("pause").innerHTML = "PAUSE";
            window.clearInterval(pel);
        }
        else
        {
        
        window.clearInterval(pel);
        pel = window.setInterval(function(){pelota(ctx);},140);
           ...