JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <div></div>
</div>

CSS

div {
	width: 150px;
	height: 150px;
	margin-right: 20px;
}
div div {
	background: green;
	width: 100%;
	height: 100%;
	float: left;
	transition: 1s;
	transform: rotate3d(0,1,0,0deg);
	border-radius: 50%;
  border: 5px solid red;
	margin-right: auto;
}
div:hover div {
	background: red;
	transition: 1s;
  border: 5px solid green;
	transform: rotate3d(0,1,0,180deg);
}