JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Circle Demo</title>
    </head>
    <body>
        <ul class='circle'>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </body>
</html>

CSS

ul.circle {
    /* Settings */
    list-style-type:none;
    list-style:none;
    
    /* Position */
    position:relative;
    width:200px;
    height:200px;
    
    /* Shape */
    border-radius:100%;
    margin:0;
    padding:0;
        
    /* Look */
    border:solid 1px #DDD;
    background-color:#FFFEEE;
    
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 22px;
    color:#333;
    font-weight:bold;
}

.circle li {
    margin:0;
    padding:0;
    display:list-item;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top:-16px;
    margin-left:-16px;
    display: list-item;
    text-align: center;
    z-index:200;
}

.circl:hover li {
    
}

.circle li.title {
    margin:auto;
    position:static;
}

JavaScript

(function() {
    //A foreach alternative function
    var each = function(a, b) {
        for (var i = 0; i < a.length; i++) {
            b(a[i]);
        }
    };

    //Get an array of all the circlr elements
    var circles = document.getElementsByClassName('circle');
    //Iterate over these elements
    each(circles, function(circle) {
        //For each of their children
        var i = 0;
        each(circle.children, function(child) {
            //Get child's index as a percentage of 2 PI radian
            var p = (i) / circle.children.length * (2 * Math.PI);
            var r = 80;
            child.style.webkitTransform = 'translatey(' + Math.sin(p) * r + 'px) translatex(' + Math.cos(p) * r + 'px)';
            i++;
        });
    });
})();