JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<html>
    <body>
        <div id="mainContainer">
            <div class="itemSemiCircle">Title 1a</div>
            <div class="itemSemiCircle">Title 2a</div>
            <div class="itemSemiCircle">Title 3a</div>
            <div class="itemSemiCircle">Title 4a</div>
            <div class="itemSemiCircle">Title 5a</div>
            <div class="itemSemiCircle">Title 6a</div>
            <div class="itemSemiCircle">Title 7a</div>
        </div>
        <br />
        <div id="otherContainer">
            <div class="itemSemiCircle">Title 1b</div>
            <div class="itemSemiCircle">Title 2b</div>
            <div class="itemSemiCircle">Title 3b</div>
            <div class="itemSemiCircle">Title 4b</div>
            <div class="itemSemiCircle">Title 5b</div>
        </div>
    </body>
</html>

CSS

#mainContainer {
 width: 500px;
background-color: yellow;
    position:relative;
}

#otherContainer {
 width: 500px;
background-color: blue;
    position:relative;
}

.itemSemiCircle {
 position: absolute;   
}

JavaScript

function placeItemsInContainer(divContainer, startX, diameter) {

    var leftV = 0;
    var topV = 0;
    var lastElement = 0;

    var centerXY = parseInt(startX) + parseInt(diameter) / 2;
    var radiusC = parseInt(diameter) / 2;
    var textHeight = 16;
    
    $('#' + divContainer).css('height', (radiusC + textHeight) + 'px');

    var angleStepInRadians = Math.PI / ($('#' + divContainer + ' .itemSemiCircle').length - 1);

    $('#' + divContainer + ' .itemSemiCircle').each(function() {
        var angle = -Math.PI/2.0 + lastElement * angleStepInRadians;

        leftV = centerXY + radiusC * Math.sin(angle);
        topV = 0 + radiusC * Math.cos(angle);

        $(this).css({left: leftV , top: topV });

        lastElement++;
    });
}

$(document).ready(function() {
    placeItemsInContainer('mainContainer', 30, 300);
    placeItemsInContainer('otherContainer', 50, 200);
});