JSFiddle - React, Tailwind, and code Playground

HTML

<div id="experiment" style="border: 5px inset #AAA; background: #CCC; height: 400px;top: 200px; position: relative; overflow: auto;">
    <p>Click me then without moving the mouse, press Q You will see the dot is correctly placed under the mouse</p>
</div>

CSS

#experiment {
    transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform: rotate(41deg);
}
.experiment-full {
    transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: rotate(41deg);
}

JavaScript

function click_handler(ev) {
    var rect = this.getBoundingClientRect();
    var left = ev.clientX - this.offsetLeft - this.clientLeft;
    var top = ev.clientY - this.offsetTop - this.clientTop + this.scrollTop;

    var dot = document.createElement('div');
    dot.setAttribute('style', 'position:absolute; width: 12px; height: 12px; top: '+top+'px; left: '+left+'px; background: red;');
    this.appendChild(dot);
}
    
document.getElementById("experiment").addEventListener('click', click_handler, false);

window.addEventListener('keydown',function(ev){
    if ( ev.keyCode === 81 ){
        document.querySelector('#experiment').setAttribute('class', 'experiment-full');
        document.querySelector('#experiment').removeAttribute('id', 'experiment');
    }
    else {
         return
    }
});