JSFiddle - React, Tailwind, and code Playground

HTML

<div id="rings"/>

JavaScript

var color = ["#06f", "#000", "red", "#fa0", "#193" ],
    lefty =  [150, 300, 450, 225, 380],
    toppy=  [50,50,50, 100,100];
for (var j = 0; j < color.length; j++) {
    //debugger;
    for (var i = 0; i < 36; i++) {
        $('#rings').append('<span class="x'+ j +'" style="color:' + color[j] + ';height:150px;display:inline-block;position:absolute;left:'+ lefty[j] +'px;top:'+ toppy[j] +'px;transform-origin: bottom center;width:15px;">*</span>');
    }
}
// for some reason i couldnt apply transformations in original loop
for (var m = 0; m < color.length; m++) {
    for (var k = 0; k < 36; k++) {
        $($('span.x' + m)[k]).css('transform', 'rotate(' + (10 * k) + 'deg)');
    }
}