JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<body>
<div  id="wheel-container">
<img id="wheel" class="spin-wheel" src="http://www.rings-things.com/colorwheel_full.gif" /></div>
<button id="start" onclick="start()">Start</button>
<button id="stop" onclick="stop()">Stop</button>
</body>

CSS

#wheel-container img{
  height: 300px;
  width: 300px; 
  padding: 30px;
}
.spin-wheel {
  animation: spin 0.5s infinite;
}

@keyframes spin {
  0%: {
    transform: rotate(60deg);
  }

  25% {
    transform: rotate(120deg);
  }

  50% {
    transform: rotate(180deg);
  }

  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

JavaScript

$(function(){
	$(document).on('click','#stop', function(){
  	$('#wheel').removeClass('spin-wheel').addClass('');
  });
  
 $(document).on('click','#start', function(){
  	$('#wheel').addClass('spin-wheel').removeClass('');
  })

})