JSFiddle - React, Tailwind, and code Playground
HTML
<div class="circle-div keepRotatingOne">
<span>hello</span>
</div>
CSS
@keyframes rotate {
100% {
-webkit-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
.keepRotatingOne {
-webkit-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.circle-div {
height: 200px;
width: 200px;
border: 1px solid #727272;
border-radius: 50%;
position: relative;
}
.circle-div span {
position: absolute;
z-index: 9999;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}