JSFiddle - React, Tailwind, and code Playground

by mpsingh2003

HTML

<div id="first">
	<div id="second">
	
	</div>
</div>

CSS

#first{
	height: 200px;
	width:200px;
	background:black;
	position:relative;
	transition: transform 1.0s linear;
	border-radius: 50%;
}

#second{
	position: absolute;
	background:red;
	width:20px;
	height: 20px;
	bottom:0;
	border-radius: 50%;
	left: 50%;
	transform: translateX(-50%);
}

#first:hover{
	transform: rotate(-360deg)
}