JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li><a href='#'>5</a></li>
<li><a href='#'>6</a></li>
</ul>

CSS

*{
    margin:0;
    padding:0;
}
@-webkit-keyframes rotate
{
    from {-webkit-transform:rotate(0deg); }
    to {-webkit-transform:rotate(360deg);}
}

@-webkit-keyframes counterrotate
{
    from {-webkit-transform:rotate(0deg);}
    to {-webkit-transform:rotate(-360deg);}
}

ul{
    position:absolute;
    width:100px;
    height:100px;
    top:100px;
    left:100px;
    -webkit-animation: rotate 10s linear infinite;
}
li{
    position:absolute;
}
a{
    background:rgba(255,0,0,0.5);
    border-radius:100px;
    text-align:center;
    line-height:0;
    padding:50px 45px;
    -webkit-transition:all 1s;
    color:white;
    font-weight:bold;
    font-family:sans-serif;
    text-decoration:none;
    position:absolute;
    text-shadow:1px 1px 1px rgba(0,0,0,0.8);
    -webkit-animation: counterrotate 10s linear infinite;
}
li:nth-child(1) {  
    -webkit-transform:rotate(60deg) translateX(75px) rotate(-60deg) ;
    
}
li:nth-child(1) a{
    background:rgba(255,0,0,0.5);
}
li:nth-child(2) {  
    -webkit-transform:rotate(120deg) translateX(75px) rotate(-120deg) ;
}
li:nth-child(2) a{  
    background:rgba(0,255,0,0.5);
}
li:nth-child(3) {  
    -webkit-transform:rotate(180deg) translateX(75px) rotate(-180deg) ;
}
li:nth-child(3) a{  
    background:rgba(0,0,255,0.5);
}
li:nth-child(4) {  
    -webkit-transform:rotate(240deg) translateX(75px) rotate(-240deg) ;
}
li:nth-child(4) a{  
    background:rgba(255,0,255,0.5);
}
li:nth-child(5) {  
    -webkit-transform:rotate(300deg) translateX(75px) rotate(-300deg) ;
}
li:nth-child(5) a{  
    background:rgba(255,255,0,0.5);
}
li:nth-child(6) {  
    -webkit-transform:rotate(360deg) translateX(75px) rotate(-360deg) ;
}
li:nth-child(6) a{  
    background:rgba(0,255,255,0.5);
}
li a:hover{
    background:rgba(0,0,0,0.5);
}