JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript">
function clock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var input = document.getElementById("clock");
input.innerHTML = hours+':'+minutes+':'+seconds;
timeId = setTimeout('clock()', 1000);
}
</script>
</head>
<body onLoad="pusk();">
<canvas id="clock_2" style="width: 600px; height: 300px;"></canvas><br/>
<p id="clock"></p><a onClick="stop_1()" href="#">Stop</a>&nbsp;&nbsp;<a onClick="pusk()" href="#">Pusk</a>
<script>  
    var canvas = document.getElementById('clock_2');
    var obCanvas = canvas.getContext('2d');    
    obCanvas.strokeStyle = 'red';
    obCanvas.fillStyle = "#fff";
    obCanvas.lineWidth = 1;
    function minutes() {
        var now = new Date();
        var minutes = now.getMinutes();
        obCanvas.moveTo(125, 75);
        var x = -Math.round(45*Math.sin(-minutes/9.5))+125;
        var y = -Math.round(45*Math.cos(-minutes/9.5))+75;
        obCanvas.lineTo(x, y);
        obCanvas.stroke();
        obCanvas.closePath();
    }
    function hours() {
        var now = new Date();
        var hours = now.getHours();        
        if (hours>12) {hours -= 12;}
        obCanvas.moveTo(125, 75);
        var x = -Math.round(45*Math.sin(-hours/2))+125;
        var y = -Math.round(45*Math.cos(-hours/2))+75;
        obCanvas.lineTo(x, y);
        obCanvas.stroke();
        obCanvas.closePath();
    }
    function seconds() {
        obCanvas.fillRect(0, 0, 600, 300);
        draw();
        obCanvas.beginPath();
        var now = new Date();
        var seconds = now.getSeconds();
        obCanvas.moveTo(125, 75);
        var x = -Math.round(65*Math.sin(-seconds/9.5))+125;
        var y = -Math.round(65*Math.cos(-seconds/9.5))+75;
        obCanvas.lineTo(x, y);
        obCanvas.stroke();
       ...