JSFiddle - React, Tailwind, and code Playground
HTML
<div class="circle">56</div>
CSS
.circle {
position: absolute;
top: 4;
right: 4;
height: 21px;
width: 21px;
border-radius: 50%;
background: #00B5F9;
color: white;
font-family: varela round;
font-size: 11;
font-weight: 500;
border: 1px solid white;
-webkit-animation-name: lol;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes lol {
0% {
-webkit-transform:rotate(0deg)
}
20% {
-webkit-transform:rotate(360deg)
}
100% {
-webkit-transform:rotate(360deg)
}
/* 100% { -webkit-transform:rotate(0deg) } */
}