JSFiddle - React, Tailwind, and code Playground

HTML

<div class="countdown-wrap">
     <div class="countdown">
    <div id="canvas60s"></div>
    <div class="count-panel level-finish-time">
      <p><span id="Timer60Sec" class="hasCountdown"><span class="countdown_row countdown_amount">39</span></span><br>
      Sec</p></div>
    </div>
    </div>

CSS

.countdown {
position: relative;
color: #339933;
}

.countdown-wrap {
position: absolute;
left: 10px;
top: 115px;
    background:#000;
}

.count-panel {
position: absolute;
top: 45px;
height: 150px;
width: 150px;
left: 31px;
}

.count-panel p {
line-height: 23px;
margin-left: -14px;
margin-top: 35px;
text-align: center;
}

.countdown span {
font-size: 65px;
}

JavaScript

//60s circular timer
  function timer60s() {
      
  var archtype = Raphael("canvas60s", 200, 200);
  var set = archtype.set();

    function drawCircle() {
      var archtype = Raphael("canvas60s", 200, 200);
      archtype.customAttributes.arc = function (xloc, yloc, value, total, R) {
        var alpha = 360 / total * value,
            a = (90 - alpha) * Math.PI / 180,
            x = xloc + R * Math.cos(a),
            y = yloc - R * Math.sin(a),
            path;
        if (total == value) {
          path = [
              ["M", xloc, yloc - R],
              ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
          ];
        } else {
          path = [
              ["M", xloc, yloc - R],
              ["A", R, R, 0, +(alpha > 180), 1, x, y]
          ];
        }
        return {
           path: path
        };
      };

      //make an arc at 50,50 with a radius of 30 that grows from 0 to 40 of 100 with a bounce
      var my_arc = archtype.path().attr({
          "stroke": "#339933",
          "stroke-width": 10,
          arc: [100, 100, 0, 100, 50]
      });



      my_arc.animate({
         arc: [100, 100, 100, 100, 50]
      }, 60000);


    } //end drawCircle





        drawCircle();

      } // end timer60s
      
      timer60s();