JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div id="tester">
</div>
<div id="page">
getBoundingClientRect on red tester returned:
<span id="tester-pos"></span>
<div id="jquery-version"></div>
</div>

CSS

#tester{
  position:absolute;
  top:50px;
  left:50px;
  width:10px;
  height:10px;
  background:red;
}

#page{
  min-height:200px;
}

body{
  border:2px solid green;
  transform: scale(1) translate(20px, 40px);
}

JavaScript

$( document ).ready(function() {
		
    $('body').append('<div id="tester2"></div>');
    $('#tester2').css({
    	position:'absolute',
      background:'blue',
      width: 10,
      height:10
    });
      var tester = document.getElementById('tester');
      console.log('tester', tester.style, tester.style.top, tester.style.left);
     
      $('#tester2').css({
	      top:tester.offsetTop - 2, // 2px border for body
  	    left:tester.offsetLeft - 2
    	});
    
    $('#jquery-version').text('jquery version: ' + $.fn.jquery);
});