JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "outer">

</div>

CSS

#outer{
 background-color:#CF3;
 width:300px;
 height:300px;
 margin:300px;
 position:absolute;
}

.inner
{
    position:relative;
    background-color:#ff0000;
    width:20px;
    height:20px;
        
}

JavaScript

var positionArray = [];

var centerX = $("#outer").offset().left;
var centery = $("#outer").offset().top;

console.log('centerX : ' + centerX  + ' centery : ' + centery );



        
     var LEFTPOS = 300*Math.cos(Math.PI/180 * 90) ;
     var TOPPOS  = 300*Math.sin(Math.PI/180 * 90) ; 
    
  
     
     $('#outer').append($("<div class = 'inner'/>").css({top: TOPPOS , left: LEFTPOS }));