JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="demo">
    <div>
        <h1>fwe</h1>
    </div>
</div>
<div style="width: 354px; height: 3px; background: black;"></div>

CSS

body {
    margin: 0;
}
#demo {
    width: 100px;
    height: 100px;
    margin-left: 100px;
    transform: scale(1.2) translateX(10px)
    /* background: red; */
    /* transform: scale(2) translateX(200px); */
    /* transform-origin: left; */
}
#demo div {
    width: 50px;
    height:50px;
    background: red;
    transform: scale(1) translateX(200px);
    transform-origin: left;
}
#demo div h1 {
    transform: translateX(10px)
}

JavaScript

function offset(el) {
    var rect = el.getBoundingClientRect(),
        scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
        scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
var a = document.querySelector('#demo div h1');

console.log(offset(a).left)