JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<script>
window.requestAnimFrame = (function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame
|| window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 30);
};
})();
 
window.setTimeout(getDirection, 30000);
var x = 176, y = 176, w = 600, h = 600, r = 26;
var d,c,s;
var rColor,gColor,bColor;
var hd = "r";
var horizontal = true;
window.onload = function () {
try{
c = document.getElementById("c");
w = c.width;
h = c.height;
s = parseInt( document.getElementById("speedy").value);
getDirection();
drawBall();
document.getElementById("intensiveWork").onclick = function () { DoIntensiveWork(); };

document.onkeydown = function () {
switch (window.event.keyCode) {
case 40:
horizontal = false;
hd = "d";
break;
case 37:
horizontal = true;
hd = "l";
break;
case 38:
horizontal = false;
hd = "u";
break;
case 39:
horizontal = true;
hd = "r";
break;
}
}
} catch (e) {
alert(e.message);
}
}
function increaseSpeed() {
s++;
document.getElementById("speedy").value = s;
}
function decreaseSpeed() {
s--;
document.getElementById("speedy").value = s;
}
function changeDirection() {
var cx = window.event.offsetX;
var cy = window.event.offsetY;
x = cx;
y = cy;
 
document.getElementById("speedy").value = s;
}
function setNewPoint(d) {
try{
switch (horizontal) {
case true:
if (x < (w - r) && hd == "r")
x += s;
else if(x > r && hd == "l")
x -= s;
break;
case false:
if (y < (h - r) && hd == "d")
y += s;
else if (y > r && hd == "u")
y -= s;
break;
}
if (x >= (w - r))
hd = "l";
if (x <= r)
hd = "r";
if (y >= (h - r))
hd = "u";
if (y <= r)
hd = "d";
} catch (e) {
alert(e.message);
}
}
function getDirection() {
horizontal = !horizontal;
var d = Math.ceil(Math.random() * 2);
if (horizontal) {
if (d == 1) {
hd = "r";
} else {
hd = "l";
}
} else {
if (d == 1) {
hd = "u";
} else {
hd = "d";
}
}
}
function drawBall() {
try {
var rgbFill =...