JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="main.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
	<div style="z-index: 0; position: relative">
		<img class="roulette_wheel" src="http://pngimg.com/uploads/roulette/roulette_PNG14.png" width="300px" height="300px" />
		<div style="position: absolute; top: 0px; left: 150px; background-color: red; width: 1px; height: 40px;"></div>
		<button value="spin" onclick="roulette_spin(this)">SPIN</button>
		<span id="score"></span>
		
	</div>
  <script>
    var force = 0;
			var angle = 0;
			var inertia = 0.985;
			var minForce = 15;
			var randForce = 15;
			var rouletteElem = document.getElementsByClassName('roulette_wheel')[0];
			var scoreElem = document.getElementById('score');
			
			var values = [
			  0,27,10,25,29,12,8,19,31,18,6,21,33,16,4,
			  23,35,14,2,0,28,9,26,30,11,7,20,32,17,5,
			  22,34,15,3,24,36,16,1
			].reverse();
			
			function roulette_spin(btn){
			  // set initial force randomly
			  force = Math.floor(Math.random() * randForce) + minForce;
			  requestAnimationFrame(doAnimation);
			}
			
			function doAnimation() {
			  // new angle is previous angle + force modulo 360 (so that it stays between 0 and 360)
			  angle = (angle + force) % 360;
			  // decay force according to inertia parameter
			  force *= inertia;
			  rouletteElem.style.transform = 'rotate('+angle+'deg)';
			  // stop animation if force is too low
			  if (force < 0.05) {
				// score roughly estimated
				scoreElem.innerHTML = values[Math.floor(((angle / 360) * values.length) - 0.5)];
				return;
			  }
			  requestAnimationFrame(doAnimation);
			}</script>
  </body>
</html>