JSFiddle - React, Tailwind, and code Playground

by vrpruthvi

HTML

<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>

JavaScript

// ARRANGE DIV CIRCULARLY
var el = document.getElementsByTagName('div');
var increase = Math.PI*2 / el.length;
var x = 0, y = 0, angle = 0, elem,t=150;

for (var i = 0; i < el.length; i++) {
    elem = el[i];
    x = t * Math.cos(angle) + 200;
    y = t * Math.sin(angle) + 200;
    elem.style.position = 'absolute';
    elem.style.left = x + 'px';
    elem.style.top = y + 'px';
    angle += increase;
}