JSFiddle - React, Tailwind, and code Playground

HTML

<h3>gauge</h3>
		<div>
			<div class="gauge-holder">
				<div id="speedo"></div><br>
				<div id="fuel"></div><br>
			</div>
			<div class="speed-controls">
				<button class="start-ignition">START</button><br>
				<b>Set MPH</b><br>
				<input type="text" class="speedInput"></input>
				<button class="accelerate" disabled="true">Set</button><br>
			</div>
			<div class="speed-controls">
				<b>Set Acceleration</b><br>
				<input type="radio" name="acceleration" value="slow">Slow<br>
				<input type="radio" name="acceleration" value="normal" checked="true">Normal<br>
				<input type="radio" name="acceleration" value="fast">Fast
			</div>
		</div>

CSS

/*gauge shell*/
.gauge {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	display: inline-block;
	line-height: 1em;
	position: relative;
}
.gauge:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border: 0.22em solid #666;
	border-radius: 100% 100% 100% 100%;
	clip: rect(auto, auto, 1em, auto);
	content: "";
	font-size: 100%;
	height: 2em;
	line-height: 1em;
	position: absolute;
	width: 2em;
}
.gauge.large{
	font-size: 100px;
	height: 100px;
	width: 200px;
}
.gauge.medium{
	height: 60px;
	width: 120px;
	font-size: 60px;
}
.gauge.small{
	height: 40px;
	width: 80px;
	font-size: 40px;
}
.gauge.xlarge{
	height: 150px;
	width: 300px;
	font-size: 150px;
}
.gauge.red:before{
	border-color: red;
}

/*gauge dial*/
.gauge .gauge-arrow{
	height: 1em;
	margin-left: -0.05em;
	transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%;
	width: 0.1em;
	transform: rotate(-90deg);
}
.gauge.fast .gauge-arrow{
	transition: all 1.5s ease 0s;
	-webkit-transition: all 1.5s ease 0s;
}
.gauge.normal .gauge-arrow{
	transition: all 2.5s ease 0s;
	-webkit-transition: all 2.5s ease 0s;
}
.gauge.slow .gauge-arrow{
	transition: all 6.5s ease 0s;
	-webkit-transition: all 6.5s ease 0s;
}
.gauge .gauge-arrow, .gauge .gauge-arrow:before{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	background: none repeat scroll 0 0 #888;
	display: inline-block;
	left: 50%;
	position: absolute;
}
.gauge .gauge-arrow:before{
	border-radius: 100% 100% 100% 100%;
	bottom: -0.1em;
	content: "";
	height: 0.2em;
	margin-left: -0.1em;
	width: 0.2em;
}

/*indication labels*/
.gauge.medium .gauge-label{
	font-size: 10px;
}
.gauge.large .gauge-label {
	font-size: 20px;
}
.gauge.small .gauge-label {
	font-size: 5px;
}
.gauge.xlarge .gauge-label {
	font-size: 30px;
}
.gauge .gauge-label{
	line-height: 0;
	position: absolute;
	font-weight: bold;
}
.gauge-label.start{
	bottom: 0;
	margin: 0 0 0 15px;
}
.gauge-label.halfway{
	width: 100%;
	text-align: center;
	margin:...

JavaScript

;(function ( $, window, document, undefined ) {
	var pluginName = 'gauge',
	defaults = {
		color: 'red',
		defaultValue: 0,
		size: 'medium',
		maxValue: 150,
		speed: 'normal',
		captionLabel: 'MPH'
	};
	function Plugin( element, options ) {
		this.element = element;
		this.options = $.extend( {}, defaults, options) ;
		this._defaults = defaults;
		this._name = pluginName;
		this.speed = this.options.speed;
		this.create();
		this.val(this.options.defaultValue);
	}
	Plugin.prototype.create = function () {
		var gauge = this;
		$(gauge.element)
			.addClass('gauge ' + gauge.options.size + ' ' + gauge.options.color + ' ' + gauge.options.speed)
			.append($('<div class="gauge-arrow"></div>'));
		if (gauge.options.labels) {
			$(gauge.element).append($('<span class="gauge-label start">' + gauge.options.labels[0] + '</span><span class="gauge-label halfway">' + gauge.options.labels[1] + '</span><span class="gauge-label maximum">' + gauge.options.labels[2] + '</span>'));
		} else {
			$(gauge.element).append($('<span class="gauge-label start">0</span><span class="gauge-label halfway">' + (gauge.options.maxValue / 2) + '</span><span class="gauge-label maximum">' + gauge.options.maxValue + '</span>'));
		}
		if (gauge.options.captionLabel) {
			$(gauge.element).append($('<span class="gauge-label center">' + gauge.options.captionLabel + '</span>'));
		}
	}
	Plugin.prototype.val = function (value) {
		var gauge = this;
		value = (180 / gauge.options.maxValue) * value;
		if (value > 180) {
			value = 180;
		}
		if (value < 0) {
			value = 0;
		}
		$(this.element).find('.gauge-arrow')
			.css({'transform': 'rotate(' + (-90 + value) + 'deg)', '-webkit-transform': 'rotate(' + (-90 + value) + 'deg)'});
	}
	Plugin.prototype.setSpeed = function (value) {
		var gauge = this;
		if (value === 'normal' || value === 'slow' || value === 'fast') {
			var classes = $(gauge.element).attr('class');				
			$(gauge.element).attr('class', classes.replace(gauge.speed, value));
			gauge.speed =...