JSFiddle - React, Tailwind, and code Playground

HTML

Number of fields: <input type="text" value="60" />
<div id="container">
    <div id="center"></div>  
</div>

CSS

body { padding: 2em; }

#center { 
    position:absolute;
    background: #00A8D9;
    width: 50%;
    height: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border:3px solid #000;
    top:100%;
    left:0%;
    box-sizing:border-box;
}
.field { width: 20px; height: 20px; position: absolute; color: #f00; text-align:center; line-height:20px;}
#container{
    position:relative;
    float:right;
}

JavaScript

function createFields() {
    $('.field').remove();
    var container = $('#container');
    for(var i = 0; i < +$('input:text').val()+1; i++) {
        $('<div/>', {
            'class': 'field',
            'text': i 
        }).appendTo(container);
    }
}

function distributeFields() {
    
    
    var fields = $('.field'), container = $('#container'),
        width = center.width()*2, height = center.height()*2,
        angle = 0, step = (2*Math.PI) / fields.length;
    var radius = width/2;
    var containerLength=$('input:text').val();
    angle=step* (containerLength-1);
   
    fields.each(function() {
        
        var x = Math.round(width + radius * Math.cos(angle));
        var y = Math.round(height + radius * Math.sin(angle));
            $(this).css({
            right: x + 'px',
            top: y + 'px'
        });
        angle -= step;
    });
    
}
 var center = $('#center');

$(window).resize(function(height) {
   
    $('#container').width($(window).height()*0.9);
    $('#container').height($(window).height()*0.9);
    var width = $('#container').width() * 0.4;
    var radius = width;
    var topPos = (width/2)*(-1.2);
    var rightPos = (width/2)*(-1.2);
    radius += 'px';
    topPos+="px";
    rightPos+="px";
    $('#center').css({
        right:'100%',
        top: '100%',
        'margin-top':topPos,
        'margin-left':rightPos,
        '-moz-border-radius' : radius,
        '-webkit-border-radius' : radius,
        'border-radius' : radius
    });


    
createFields();
distributeFields();
    // rest of your code for font-size setting etc..
});

$(window).resize();


$('input').change(function() {
    createFields();
    distributeFields();
});