JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container1" id="container1">

</div>
<div class="container2" id="container2">

</div>
<div class="container3" id="container3">

</div>

CSS

.container1{
  border:1px solid red;
  width:100px;
  height:100px;
  position:absolute;
  left:0%;
  top:5%;
}

.container2{
  border:1px solid blue;
  width:200px;
  height:200px;
  position:absolute;
  left:33%;
  top:1%;
}

.container3{
  border:1px solid pink;
  width:200px;
  height:200px;
  position:absolute;
  lefT:30%;
  top:45%;
}

JavaScript

container1Rect = document.getElementById("container1").getBoundingClientRect();
container2Rect =document.getElementById("container2").getBoundingClientRect();
container3Rect = document.getElementById("container3").getBoundingClientRect();


console.log(container1Rect);