JSFiddle - React, Tailwind, and code Playground

by DeepakKamat

HTML

<div id='square'/>

CSS

div
{
position:absolute;
top:100px;
left:180px;
}



#square {
    width: 96px;
    height: 48px;
    background: white;
    border-color: black;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
    -webkit-transform:rotate(55deg) !important;
    -webkit-transition:all 2.4s; 
    -webkit-animation:rtd infinite;
}
@keyframes rtd
{
    0% {transform:rotate(55deg) !important;}
100% {transform:rotate(355deg) !important;}
}

#square:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: white;
    border: 18px solid black;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}

#square:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: black;
    border: 18px solid white;
    border-radius:100%;
    width: 12px;
    height: 12px;
} 

#square
{
    -webkit-transform:rotate(355deg)
}