JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/mudassir0909/analog-stopwatch/master/js/stopwatch.js"></script>
<script src="https://rawgithub.com/mudassir0909/analog-stopwatch/master/js/dial.js"></script>
  <body>
    <button class="tile action-button start-button centered" id="start-stop">Start</button>
    <canvas id="analog-stopwatch" class="centered" width="600" height="600">Your browser doesn't support canvas</canvas>
  </body>

CSS

body{
  background-color: #1d1d1d;
}

.centered{
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
}

#analog-stopwatch{
  top: 50px;
}

.tile{
  border: none;
  display: block;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  -webkit-box-shadow: inset 0px 0px 1px #FFFFCC;
  -moz-box-shadow: inset 0px 0px 1px #FFFFCC;
  -o-box-shadow: inset 0px 0px 1px #FFFFCC;
  box-shadow: inset 0px 0px 1px #FFFFCC;
}

.action-button{
  cursor: pointer;
  color: white;
  font-size: 1em;
  padding: 5px;
  width: 70px;
}

.action-button:hover{
  outline: #999999 solid 1px;
}

.start-button{
  background-color: #60a917;
}

.stop-button{
  background-color: #9a1616; 
}

JavaScript

var canvas = document.getElementById("analog-stopwatch");
  var context = canvas.getContext('2d');
  var SECONDS_DIAL_X_COORDINATE = canvas.width/2;
  var SECONDS_DIAL_Y_COORDINATE = canvas.height/2;
  var SECONDS_DIAL_RADIUS = 250;
  var MINUTES_DIAL_X_COORDINATE = SECONDS_DIAL_X_COORDINATE;
  var MINUTES_DIAL_Y_COORDINATE = 200;
  var MINUTES_DIAL_RADIUS = 70;

  var clearCanvas = function(){
    context.clearRect(0, 0, canvas.width, canvas.height);
  }

  window.stopwatch = new StopWatch({callback: 'animate'});
  var secondsDial = new Dial({
    cx: SECONDS_DIAL_X_COORDINATE,
    cy: SECONDS_DIAL_Y_COORDINATE,
    dialRadius: SECONDS_DIAL_RADIUS,
    dialThickness: 20,
    drawDialNumbers: true,
    equalTicks: false,
    context: context,
    innerFill: true,
    customStyling: function(ctx){
      var cx = SECONDS_DIAL_X_COORDINATE, cy = SECONDS_DIAL_Y_COORDINATE, radius = SECONDS_DIAL_RADIUS;
      ctx.arc(cx, cy, radius + 40, 0, 2*Math.PI, true);
      var radialGradient = ctx.createRadialGradient(cx, cy, radius, cx, cy, radius + 40);
      radialGradient.addColorStop(0, "#333333");
      radialGradient.addColorStop(0.5, "white");
      radialGradient.addColorStop(1, "#333333");
      ctx.fillStyle = radialGradient;
      ctx.fill();
      ctx.closePath();
    }
  });
  var minutesDial = new Dial({
    cx: MINUTES_DIAL_X_COORDINATE,
    cy: MINUTES_DIAL_Y_COORDINATE,
    dialRadius: MINUTES_DIAL_RADIUS,
    dialThickness: 2,
    drawDialNumbers: false,
    equalTicks: true,
    context: context
  })

  stopwatch.callbackArgument = stopwatch.netTime;

  window.animate = function (netTime){
    if(netTime % 1000 === 0){
      clearCanvas();
      secondsDial.redraw(stopwatch.seconds()*6);
      minutesDial.redraw(stopwatch.minutes()*6);
    }
  }

  secondsDial.redraw(0);
  minutesDial.redraw(0);

  //replace's an element's given class with a specified class
  var replaceClass = function(ele, class1, class2){
    if(ele.className.indexOf(class1) > 1){
     ...