JSFiddle - React, Tailwind, and code Playground

by domenlightenment

HTML

<head>
<style>
#blue{height:100px;width:100px;background-color:blue;border:10px solid gray; padding:25px;margin:25px;}

#red{height:50px;width:50px;background-color:red;border:10px solid gray;}
</style>
</head>
<body style="border:10px solid gray;">

    <div id="blue"><div id="red"></div></div>

<script>

var div = document.querySelector('#red'); 

console.log(div.offsetLeft); //logs 60
console.log(div.offsetTop); //logs 60

</script>
</body>

CSS

#blue{height:100px;width:100px;background-color:blue;border:10px solid gray; padding:25px;margin:25px;}

#red{height:50px;width:50px;background-color:red;border:10px solid gray;}