JSFiddle - React, Tailwind, and code Playground

HTML

<h3>wheel</h3>
		<div id="clock">
			<div id="hours">
				<div value="12">12</div>
				<div value="01">01</div>
				<div value="02">02</div>
				<div value="03">03</div>
				<div value="04">04</div>
				<div value="05">05</div>
				<div value="06">06</div>
				<div value="07">07</div>
				<div value="08">08</div>
				<div value="09">09</div>
				<div value="10">10</div>
				<div value="11">11</div>
			</div>
			<div class="splitter">:</div>
			<div id="minutes"></div>
			<div class="splitter">:</div>
			<div id="seconds"></div>
		</div>
		<div id="alarm">
			<h5>Set alarm</h5>
			<input type="text" id="hours_alarm"/>
			:
			<input type="text" id="minutes_alarm"/>
			<button id="set">Set</button>
			<div class="alarm-status hide"></div>
		</div>

CSS

/*Wheel CSS*/
.wheel-panel {
	display: block;
	position: absolute;
	width: 90%;
	height: 90%;
	left: 4%;
	top: 4%;
	border: 2px solid black;
	line-height: 2em;
	font-size: 4em;
	font-weight: bold;
	text-align: center;
}
.wheel-panel-left{
	position: absolute;
	top: 0px;
	height: 100%;
	width: 50%;
}
.wheel-panel-right{
	position: absolute;
	top: 0px;
	left: 50%;
	height: 100%;
	width: 50%;
}
.wheel-panel-bottom{
	position: absolute;
	top: 50%;
	height: 50%;
	width: 100%;
}
.wheel-panel-top{
	height: 50%;
	width: 100%;
	position: absolute;
	top: 0px;
}
.wheel {
	position: relative;
	border: 1px solid #CCC;
	/*TODO: look at making perspective configurable*/
	-webkit-perspective: 700px;
	-moz-perspective: 700px;
	-o-perspective: 700px;
	perspective: 700px;
}
.wheel-panel-container {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform: translateZ( -288px );
	-moz-transform: translateZ( -288px );
	-o-transform: translateZ( -288px );
	transform: translateZ( -288px );
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	-o-transition: -o-transform 1s;
	transition: transform 1s;
}

#hours{
	float: left;
}
#minutes{
	float: left;
}
#seconds {
	float: left;
}
#clock{
	height: 150px;
	overflow: hidden;
	padding: 1%;
	width: 98%;
	margin: 0 auto;
}
#minutes .panel{
	background: grey;
}
#hours .panel{
	background: grey;
}
#seconds .panel{
	background: grey;
}
#clock .splitter{
	height: 150px;
	width: 32px;
	font-weight: bold;
	font-size: 100px;
	float: left;
}
#alarm {
	padding: 20px;
	margin: 0 auto;
	width: 200px;
}
#alarm input{
	width: 25px;
}
.hide {
	display: none;
}

JavaScript

;(function ( $, window, document, undefined ) {
	var pluginName = 'wheel',
	defaults = {
		// speed: 'normal', : SPEED COULD BE INTRODUCED IF WE DO A JUMP TO VALUES
		click: true,
		width: 210,
		height: 140,
		size: 'medium',
		clip:false,
		perspective: '100px',
		mouseOver: false,
		panelsContainer: false, //can be used for a DOM element that already exists containing the right structure.
		//could be a number of ways to push content for this really, could do string or object or existing DOM element, it's a tough one.
		panels: [
			{
				value: 1,
				content: $('<div>1</div>')
			},
			{
				value: 2,
				content: $('<div>2</div>')
			},
			{
				value: 3,
				content: $('<div>3</div>')
			}
		],
		verticalAxis: false
	};
	function Plugin( element, options ) {
		//element is actually selector in jQuery
		this.defaults = {
			// speed: 'normal', : SPEED COULD BE INTRODUCED IF WE DO A JUMP TO VALUES
			click: true,
			width: 210,
			height: 140,
			size: 'medium',
			clip:false,
			perspective: '100px',
			mouseOver: false,
			panelsContainer: false, //can be used for a DOM element that already exists containing the right structure.
			//could be a number of ways to push content for this really, could do string or object or existing DOM element, it's a tough one.
			panels: [
				{
					value: 1,
					content: $('<div>1</div>')
				},
				{
					value: 2,
					content: $('<div>2</div>')
				},
				{
					value: 3,
					content: $('<div>3</div>')
				}
			],
			verticalAxis: false
		};
		this.element = $(element);
		this.options = $.extend({}, this.defaults, options);
		this._defaults = defaults;
		this._name = pluginName;	
		this.initialize();
	}
	Plugin.prototype._getPanels = function (container) {
		var panels = [];
		$.each(container.children('div'), function (){
			var panel = {};
			panel.content = this;
			panels.push(panel);
		});
		return panels;
	}
	Plugin.prototype.initialize = function () {
		this.currentRotation = 0;
		this.currentIndex = 0;
		if...