JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Knob/1.2.13/jquery.knob.min.js"></script>
<div class="container">
  <div class="box">

    <div class="clock">
      <div class="col-half">
        <input type="text" value="10" data-width="80%" id="knob1" class="dial" disabled/>

      </div>

      <div class="col-half">
        <input type="text" value="15" data-width="80%" id="knob2" class="dial" disabled/>

      </div>
    </div>

  </div>

</div>

CSS

* {
	overflow: hidden;
	padding: 0;
	margin: 0;
}

html,body {
	height: 100vh;  
	background: linear-gradient(0deg, rgba(75,103,122,1) 0%, rgba(0,194,194,1) 100%);
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0 auto;
	/*overflow: auto;*/
	font-family: 'Helvetica';
}


.container {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	/*overflow: hidden;*/
}
.box {	
	text-align: center;
	color: #fff;
	width: 50%;
	max-width: 500px;
	min-width: 230px;
}

.clock {
	background-color: #3A4950;
	padding: 2em 2em;
	/*overflow: hidden;*/
}
.col-half {
	width: 50%;
	float: left;
}

.dial {
	font-size: 35px !important;
}

.button {
	background-color: #232425;
	padding: 1em 2em;
	border-radius: 0 0 8px 8px;
}

@media only screen and (max-width: 768px) {

	.col-half {
		padding: 20px 0;
		/*width: 50%;*/
	}

	.clock {
		padding: 0;
	}

	.dial {
		font-size: 20px !important;
	}

}

@media only screen and (min-width:769px and max-width: 980px) {

	.dial {
		font-size: 25px !important;
	}
}

JavaScript

$('#knob1').knob({
	'min': 0,
	'max': 60,
	'step': 1, 
	'width': 200,     
	'thickness': 0.3,
	'fgColor': '#06BABC',
	'bgColor': '#333',	
	'format' : function(v) {			
	 	var sec = parseInt(v)*60;
		var min = Math.floor(sec / 60);
		sec -= min * 60;
		return min + ':' + (sec < 10 ? "0" + sec : sec);
	}       
});



$('#knob2').knob({
	'min': 0,
	'max': 60,
	'step': 1,  
	'width': 200,     
	'thickness': 0.3,
	'fgColor': '#ef5353',
	'bgColor': '#333',

	'format' : function(v) {			
	 	var sec = parseInt(v)*60;
		var min = Math.floor(sec / 60);
		sec -= min * 60;
		return min + ':' + (sec < 10 ? "0" + sec : sec);
	}
   
});