JSFiddle - React, Tailwind, and code Playground

by AshMokhberi

HTML

<div id="experiment" style="border: 5px inset #AAA; background: #CCC; height: 400px; position: relative; overflow: auto;">
</div>
<div class='overlay'>
</div>

CSS

#experiment {
    transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    -webkit-transform: scale(0.5);
}
.experiment-full {
    transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
}
.overlay {
    position: absolute;
}

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: 2px; height: 2px; top: '+top+'px; left: '+left+'px; background: red;');
    document.querySelector('#experiment').appendChild(dot);
}

(function(){
    var el = document.querySelector('.overlay'),
        rect = document.querySelector('#experiment').getBoundingClientRect();
    el.style.width = rect.width +'px';
    el.style.height = rect.height +'px';
    el.style.top = rect.top +'px';
    el.style.left = rect.left +'px';
    
})();

    

document.querySelector(".overlay").addEventListener('click', click_handler, false);