JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//dev.dforge.net/labs/spinningwheel/sw/spinningwheel.js"></script>
<link rel="stylesheet" href="//dev.dforge.net/labs/spinningwheel/sw/spinningwheel.css">
<div id="content-wrapper">
	<h1> iPhone Spinning-wheel </h1>
	<p id="result"> </p>
</div>

<div id="wheel-wrapper"></div>
<button class="btn btn-default" onclick="alert(SpinningWheel.getSelectedValues().values.map(function (o, k) { return o; }).reduce(function (prev, curr) { return prev + curr + ' ' }, '').trim());">getSelectedValues</button>

CSS

button {
    margin: 20px;
    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
}
#wheel-wrapper
{
   width:400px;
   height:400px;
 //  border:1px solid red;
}

}
#sw-wrapper {
	position:absolute; z-index:1000;
	left:0;
	width:100%;
	font-family:helvetica, sans-serif;
	background:rgba(0,0,0,0.7);
	text-align:left;
}

#sw-header {
	position:relative;
	width:100%; height:43px;
	border-top:1px solid #000; border-bottom:1px solid #000;
	background: #a3a3a3; /* Old browsers */
	background: -moz-linear-gradient(top, #a3a3a3 0%, #535353 1%, #535353 1%, #292929 49%, #141414 51%, #2a2a2a 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a3a3a3), color-stop(1%,#535353), color-stop(1%,#535353), color-stop(49%,#292929), color-stop(51%,#141414), color-stop(100%,#2a2a2a)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #a3a3a3 0%,#535353 1%,#535353 1%,#292929 49%,#141414 51%,#2a2a2a 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #a3a3a3 0%,#535353 1%,#535353 1%,#292929 49%,#141414 51%,#2a2a2a 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #a3a3a3 0%,#535353 1%,#535353 1%,#292929 49%,#141414 51%,#2a2a2a 100%); /* IE10+ */
	background: linear-gradient(top, #a3a3a3 0%,#535353 1%,#535353 1%,#292929 49%,#141414 51%,#2a2a2a 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a3a3a3', endColorstr='#2a2a2a',GradientType=0 ); /* IE6-9 */
	opacity: 0.9;
}

#sw-cancel,...

JavaScript

$(document).ready(function()
	{
$("#content-wrapper").hide();
        openSlot();
document.querySelector('#wheel-wrapper').appendChild(document.querySelector('#sw-wrapper'));
document.querySelector('#sw-wrapper').style.top = '400px';
document.querySelector('#sw-wrapper').style.position = 'relative';
document.querySelector('#wheel-wrapper').style.overflow = 'hidden';				}); 
	 
	function openSlot() 
	{     
		var amount = {1: '25,000', 2: '1,687,000', 3: '85,654', 4: '45,750', 5: '3,75,000'};
		
		SpinningWheel.addSlot(amount, "center", 2);
		
		SpinningWheel.setCancelAction(cancel);
		SpinningWheel.setDoneAction(done);
		/* Fire below function when slot values change. */
        /*SpinningWheel.setChangeAction(function () { alert(SpinningWheel.getSelectedValues().values.map(function (o, k) { return o; }).reduce(function (prev, curr) { return prev + curr + ' ' }, '').trim()); });*/
        
SpinningWheel.open();
}
	
	function done() 
    {
	var results = SpinningWheel.getSelectedValues();
	document.getElementById('result').innerHTML = 'values: ' + results.values.join(' ') + '<br />keys: ' + results.keys.join(', ');
    $("#content-wrapper").show();
    e.preventDefault();
	e.stopPropagation();
	}

	function cancel() {
		document.getElementById('result').innerHTML = 'cancelled!';
	}
	
	document.addEventListener("DOMContentLoaded", "openSlot", false);