JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test">
TEST TEST    
</div>

<div id="console">
    
</div>

CSS

#test {
    width: 100px;
    height: 100px;   
    background-color: green;
    position: absolute;
    left: 50px;
    top: 50px;
    
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
}

#console {
 margin-top: 150px;
 padding: 5px;
 background-color: #ddd;   
}

JavaScript

var pos = $('#test').position();
var off = $('#test').offset();
var left = $('#test').css('left');
var top = $('#test').css('top');

$('#console').append('<p>position left: '+pos.left+'</p>');
$('#console').append('<p>position top: '+pos.top+'</p>');
$('#console').append('<p>offset left: '+off.left+'</p>');
$('#console').append('<p>offset top: '+off.top+'</p>');
$('#console').append('<p>css left: '+left+'</p>');
$('#console').append('<p>css top: '+top+'</p>');