JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="reset-link">
    <button type="submit" class="action">Reset to Current Time</button>
</div>

<svg id="velsheda" class="active" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="470px" height="620px" viewBox="0 0 470 620" enable-background="new 0 0 470 620" xml:space="preserve">
<g>
	<path fill="#EAEAEA" stroke="#D3D3D3" stroke-miterlimit="10" d="M331.002,502.922c0-3.867-3.134-7-7-7H51.336
		c-3.866,0-7,3.133-7,7v22.666c0,3.867,3.134,7,7,7h272.667c3.866,0,7-3.133,7-7V502.922z"/>
	<line fill="none" stroke="#EDEDED" stroke-width="7" stroke-miterlimit="10" x1="51.53" y1="514.256" x2="322.281" y2="514.256"/>
	<path fill="#EFEFEF" stroke="#D8D8D8" stroke-miterlimit="10" d="M314.698,509.508c0.404,0.93,0.638,1.973,0.638,3.08v22.668
		c0,3.865-2.77,7-6.186,7H68.189c-3.417,0-6.186-3.135-6.186-7v-22.668c0-1.012,0.194-1.973,0.537-2.842
		c-0.483-1.119-0.761-2.379-0.761-3.719v-57.131c0-4.545,3.134-8.229,7-8.229h19.333c3.866,0,7,3.684,7,8.229v56.691h186.917
		v-56.691c0-4.545,3.134-8.229,7-8.229h19.333c3.866,0,7,3.684,7,8.229v57.131C315.362,507.273,315.12,508.449,314.698,509.508z"/>

		<line fill="none" stroke="#F7F7F7" stroke-width="7" stroke-miterlimit="10" x1="300.082" y1="442.396" x2="300.082" y2="495.385"/>
	<line fill="none" stroke="#F7F7F7" stroke-width="7" stroke-miterlimit="10" x1="78.917" y1="442.396" x2="78.917" y2="495.385"/>
	<line fill="none" stroke="#F7F7F7" stroke-width="7" stroke-miterlimit="10" x1="71.339" y1="523.385" x2="305.212" y2="523.385"/>
	<g>
		<path d="M272.086,596.91c-0.363,3.577-3.469,6.476-6.934,6.476c0,0-55.184,8.947-73.437,9c-19.13,0.055-77.119-9-77.119-9
			c-3.465,0-6.618-2.898-7.04-6.476l-9.809-98.051c-0.285-3.576,2.637-6.475,6.521-6.475h168.782c3.884,0,6.886,2.898,6.699,6.475
			L272.086,596.91z"/>
	</g>
	<g>
		<g>
			<polyline fill="none" stroke="#262425" stroke-miterlimit="10" points="251.985,598.761 258.731,587.26...

CSS

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
#container {
  width: 470px;
  margin: 0 auto;
}

#reset-link {
  display: none;
  margin: 10px 0;
  text-align: center;
}
#reset-link button {
  border: 1px solid #076fe4;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 0 #8ebcf1;
  color: white;
  display: inline-block;
  font-size: inherit;
  font-weight: bold;
  background-color: #4294f0;
  background-image: -webkit-linear-gradient(#4294f0, #0776f3);
  background-image: linear-gradient(#4294f0, #0776f3);
  padding: 7px 18px;
  text-decoration: none;
  text-shadow: 0 1px 0 #0065d6;
  background-clip: padding-box;
}
#reset-link button:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 0 #60a2ec;
  cursor: pointer;
  background-color: #2f87ea;
  background-image: -webkit-linear-gradient(#2f87ea, #086fe3);
  background-image: linear-gradient(#2f87ea, #086fe3);
}
#reset-link button:active:not(:disabled), #reset-link button:focus:not(:disabled) {
  border: 1px solid #076fe4;
  box-shadow: inset 0 0 8px 4px #0868d3, inset 0 0 8px 4px #0868d3;
}
#reset-link button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.instructions {
  font-size: 18px;
  line-height: 18px;
  padding-top: 10px;
}

#seconds-topper-tool.active {
  -webkit-animation: spin 60s linear infinite;
  -moz-animation: spin 60s linear infinite;
  animation: spin 60s linear infinite;
  -webkit-transform-origin: 50% 51%;
  -moz-transform-origin: 50% 51%;
  -ms-transform-origin: 50% 51%;
  -o-transform-origin: 50% 51%;
  transform-origin: 50% 51%;
}

#seconds-topper-tool.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
 ...

JavaScript

(function(window, document, $) {
    var theTimer,
        isCrownActive=false,
        isManualTime=false,
        theFills = ["fill-1","fill-2","fill-3","fill-1","fill-3"],
        theStrokes = ["stroke-1","stroke-2","stroke-3","stroke-1","stroke-3"],
        crownCounter= 0,
        theWatch = {
        init: function() {
            theWatch.setCurrentTime("set");
            theWatch.setIntervalTimer();

            $("#the-crown").on("click", function() {
                theWatch.toggleCrown();
            });

            $("#reset-link button").on("click", function() {
                theWatch.setCurrentTime("reset");
            });
        },

        setIntervalTimer: function() {
            if ($("#velsheda").is(".active")) {
                theTimer = setInterval(function() {
                    if (!isManualTime) {
                        theWatch.setCurrentTime("set");
                    } else {
                        theWatch.updateManualTime();
                    }

                }, 60000);
            }
        },
        setCurrentTime: function(type) {
            /**
             * Gets and sets the current time
             * 1 Hour = 30deg, 1 Minute = 0.5deg
             */
            var d = new Date();
            var hours = d.getHours();
            hours = ((hours + 11) % 12 + 1);
            var minutes = d.getMinutes();
            if (type == "set") {
                $("#the-hand").rotate(hours * 30 + Math.round((minutes * 0.5) * 100)/100 +"deg");
            } else {
                isManualTime=false;
                $("#the-hand").animate({rotate: hours * 30 + Math.round((minutes * 0.5) * 100)/100 +"deg"}, 1000, function() {
                    theWatch.toggleResetButton();
                });
            }

        },
        updateManualTime: function() {
            $('#the-hand').animate({rotate: '+=0.5deg'}, 1);
        },

        toggleCrown: function() {
            isManualTime=true;

            if...