JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
  <div class='test'>
  </div>
</div>
<button class='button'>
Rotate
</button>

CSS

body {
  margin: 5rem;
}

.container {
  background: transparent;
  border: 1px solid orange;
  width: 10rem;
  height: 10rem;
  position: relative;
  left: 15px;
  top: 15px;
}

.test {
  width: 50px;
  height: 50px;
  background: transparent;
  position: relative;
  border:1px solid red;
  transition: all 1s ease;
 }
 
.rotate {
  transform: rotate(30deg);
  /*Can visualize whats happening when the transform origin value is any of below commented values*/
  /*transform-origin: 50px 50px;
  transform-origin: 0px 0px;
  /*transform-origin: 0px 50px;
  transform-origin: 50px 0px;*/
  transform-origin: 70px 80px;
  transition: all 1s ease;
}

.button {
  padding: 5px;
  background: teal;
  color: white;
  position: relative;
 top: 3rem;
}

JavaScript

$(document).ready(function(e) {
	var container = $(".test");
	$('.button').click(function() {
  	container.toggleClass("rotate");
	});
});