JSFiddle - React, Tailwind, and code Playground

HTML

<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<div id="pane"></div>

JavaScript

var canvas = Raphael("pane", 0, 0, 500, 500);

var clock = canvas.circle(200, 150, 100).attr("stroke-width", 2);
canvas.circle(200, 150, 3).attr("fill", "#000");

var cpt = clock.node.ownerSVGElement.createSVGPoint();
cpt.x = clock.attr('cx');
cpt.y = clock.attr('cy');
cpt = cpt.matrixTransform(clock.node.getScreenCTM());

var angleplus = 360,
    rad = Math.PI / 180,
    cx = 200,
    cy = 150,
    r = 90,
    startangle = -90,
    angle = 30,
    x, y, endangle;

for (i = 1; i < 13; i++) {

    endangle = startangle + angle;

    x = cx + r * Math.cos(endangle * rad);
    y = cy + r * Math.sin(endangle * rad);

    canvas.text(x, y, i + "");

    startangle = endangle;
}

var hand = canvas.path("M200 70L200 150").attr("stroke-width", 1);
var minute_hand = canvas.path("M200 100L200 150").attr("stroke-width", 2);
var hour_hand = canvas.path("M200 110L200 150").attr("stroke-width", 5);

hour_hand.drag( move, start, end );
minute_hand.drag( move, start, end );
hand.drag( move, start, end );

function move (dx,dy,x,y) {
   

    var angle = ( 90 + Math.atan2(y - cpt.y - 5, x - cpt.x - 5 ) * 180 / Math.PI + 360) % 360;
    this.rotate(angle, 200,150);
    this.angle = angle;
}

function start() {
};

function end() {
    alert( parseInt( this.angle / 30  ) )
}

var time = new Date();

angle = time.getSeconds() * 6;

minute_hand.rotate(6 * time.getMinutes(), 200, 150);

var hr = time.getHours();
if (hr > 12) hr = hr - 11;

hour_hand.rotate(30 * hr, 200, 150);

var minute_angle = 6 + time.getMinutes() * 6,
    hour_angle = 0.5 + time.getMinutes() * 30;
setInterval(function () {
    angle = angle + 6;
    if (angle >= 360) {
        angle = 0;

        minute_hand.rotate(minute_angle, 200, 150);
        minute_angle = minute_angle + 6;

        hour_hand.rotate(hour_angle, 200, 150);
        hour_angle = hour_angle + 0.5;
    }
    if (minute_angle >= 360) {
        minute_angle = 0;

    }

    hand.rotate(angle, 200, 150);

}, 1000);