JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<div id="pie" class="rotate">
<div id="pos" class="rot0">
<div class="rot0" onclick="myFunction(0)">1</div>
<div class="rot6" onclick="myFunction(1)">2</div>
<div class="rot5" onclick="myFunction(2)">3</div>
<div class="rot4" onclick="myFunction(3)">4</div>
<div class="rot3" onclick="myFunction(4)">5</div>
<div class="rot2" onclick="myFunction(5)">6</div>
<div class="rot1" onclick="myFunction(6)">7</div>

CSS

#pie {
    width: 200px;
    height: 200px;
    left: 35px;
    top: 35px;
    position: absolute;
    background-color: papayawhip;
    border-radius: 50%;
}

#pos div {
    background-color: lightblue;
    left: 0px;
    top: 100px;    
    width: 30px;
    height: 30px;
    position: absolute;
    -webkit-transform-origin: 100px 0px;
    border-radius: 50%;
}

#pos {
    width: 100%;
    height: 100%;
}

#pie .rot0 {
        -webkit-transform:rotate(0deg);
        -transform:rotate(0deg);

}
#pie .rot1 {
        -webkit-transform:rotate(52.5deg); 
        -transform:rotate(52.5deg);

}
#pie .rot2 {
        -webkit-transform:rotate(104deg); 
        transform:rotate(104deg); 
}
#pie .rot3 {
        -webkit-transform:rotate(154.5deg); 
        transform:rotate(154.5deg); 
}
#pie .rot4 {
        -webkit-transform:rotate(204deg); 
        transform:rotate(204deg); 
}
#pie .rot5 {
        -webkit-transform:rotate(254.5deg); /* (360 / 7) * 5 = 51.5 */
        transform:rotate(254.5deg); /* (360 / 7) * 5 = 51.5 */
}
#pie .rot6 {
        -webkit-transform:rotate(307deg); /* (360 / 7) * 6 = 51.5 */
        transform:rotate(307deg); /* (360 / 7) * 6 = 51.5 */
}


.rotate1 {
    -webkit-animation: circle1 2s 1 linear;    
    -webkit-transform-origin: 50% 50%;
}
@-webkit-keyframes circle1 {
    from {-webkit-transform: rotateZ(-52.5deg)}
    to {-webkit-transform: rotateZ(0deg)}
}

.rotate2 {
    -webkit-animation: circle2 4s 1 linear;    
    -webkit-transform-origin: 50% 50%;
}
@-webkit-keyframes circle2 {
    from {-webkit-transform: rotateZ(-104deg)}
    to {-webkit-transform: rotateZ(0deg)}
}

.rotate3 {
    -webkit-animation: circle3 6s 1 linear;    
    -webkit-transform-origin: 50% 50%;
}
@-webkit-keyframes circle3 {
    from {-webkit-transform: rotateZ(-154.5deg)}
    to {-webkit-transform: rotateZ(0deg)}
}

.rotate4 {
    -webkit-animation: circle4 8s 1 linear;    
    -webkit-transform-origin: 50% 50%;
}
@-webkit-keyframes circle4 {
    from...

JavaScript

var pos=0;

function myFunction(newpos) {
     var delta=newpos-pos;
     if (delta < 0) { delta = delta + 7;}
     pos=newpos;
     document.getElementById("pos").className="rot"+newpos;
     document.getElementById("pie").className="rotate"+delta;
     document.getElementById("pie").addEventListener('webkitAnimationEnd', function(){
    this.className='';
}, false);

}