JSFiddle - React, Tailwind, and code Playground

HTML

<div id='quiz_timer' class="quiz_timer" width="300px" height="300px" >
</div>

CSS

.quiz_timer {
    width:100%;
    text-align:center;
}

.qt_alarm {
    animation:qt_kfalarm 0.6s ease 0s 5;
}

.qt_alram_text 
{
    font-size:20px;
    width:100%;
	animation-name: bounce_text;
	animation-duration: 1s;
	transform-origin:50% 50%;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
.min_text .min_text_tc, .min_text_mask .min_text_mask_tc {
    animation:fillOpacity1 1s ease 0s infinite;
}
@-webkit-keyframes bounce_text {
	0% { -webkit-transform: scale(1); }
	18% { -webkit-transform: scale(0.9); }
	35% { -webkit-transform: scale(1); }
 	50% { -webkit-transform: scale(1); }
	68% { -webkit-transform: scale(0.9); }
	85% { -webkit-transform: scale(1); }   
}

@keyframes qt_kfalarm {
  from { r: 65px;  stroke-opacity: 1; } 
  to   { r : 75px; stroke-opacity: 0;} 
}
@keyframes qt_opalarm {
  from {stroke-opacity: 1; fill-opacity:1 } 
  to   {stroke-opacity: 0; fill-opacity:0} 
}


.qt_alarm_vib {
    animation-delay: 0s;
    animation-duration: 1s;
    animation-name: alarm_vib;
    animation-iteration-count: 3;
    animation-timing-function: linear;
}
.qt_alarm_vib_op {
    animation-delay: 0s;
    animation-duration: 3s;
    animation-name: fillOpacity1;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
    animation-fill-mode: forwards;
}

@keyframes fillOpacity1 { 
    0% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    50% {
        fill-opacity: 1;
        stroke-opacity: 1;
    }
    100% {
        fill-opacity: 0;
        stroke-opacity: 0;
    }
}
@-webkit-keyframes alarm_vib {
    0%, 100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1)
    }
    10%, 20% {
        -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg);
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15)...

JavaScript

/*

FEATURES:
- Timer
- Alram
 */
/*

FEATURES:
- Timer
- Alram
 */
(function($, window) {
  "use strict";
  var QuizTimer, defaults, pluginName,saveTimers,supportsHtml5Storage,completeCircle;
  pluginName = "quiztimer";
  saveTimers = [];
   $.fn.toMilliSec = function() {
        var time=0;
        if(typeof this.prop('hour') != 'undefined') {
          time = this.prop('hour') * 60  * 60 * 1000 ;
        }
        if(typeof this.prop('min')  != 'undefined') {
          time += this.prop('min') * 60 * 1000;
        }
        if(typeof this.prop('sec')  != 'undefined') {
          time += this.prop('sec') * 1000; 
        }
        if(typeof this.prop('milli')  != 'undefined') {
          time += this.prop('milli'); 
        }        
        return  time;
  };
 $.fn.toTime = function(millisec) {
        var time={};
        time.hour = Math.floor((millisec / (60 *60 * 1000)) % 60);
        time.min = Math.floor((millisec / (60 * 1000)) % 60);
        time.sec = Math.floor((millisec / 1000) % 60);
        time.milli = Math.floor(millisec % 1000);
        return  time;
  }; 
 completeCircle = 359.98;
 defaults = {
    namespace: "formsaveStorage",
    webStorage: "localStorage",
    maxItems: 100,
    useOnlyNS:false,
    useStorage:true,
    circleRadius: 60,
    circelOffset:{x:20,y:20},
    iteration:1,
    textStyle:'font-size:24px; font-family:Arial;',
    showAlarm:true,
    iterationCompletedAlarm:true,
    completedAlarmMessage:"Time Completed",
    textOffset: {x:30,y:8},
    alarmInterval:'3',// this is in seconds
    playTimerAudio:true,
    playAlarmAudio:true,
    timerAudioTag: null,
    alarmAudioTag: null,
    showPlayButtons:true,
    showSeconds:false,
    timerInterval:300,
    svgClass:'qtimer',    
    showAlaramText:false,
    time: {
      hour:0,
      min:0,
      sec:30,
    },
    startat: {
      hour:0,
      min:0,
      sec:0,
    },
    alarms: [
        {time:{hour:0,min:0,sec:15},message:"Half Time"},
    ],
    hsl: {
     ...