JSFiddle - React, Tailwind, and code Playground

HTML

<div id="click-area"></div>
<span id="percents"></span>

CSS

#click-area {
    width: 400px;
    height: 300px;
    border: 1px solid #808080;
}

JavaScript

var clickArea = document.getElementById ('click-area');
var percents = document.getElementById ('percents');
var clickRect = clickArea.getBoundingClientRect ();
var x, y, xp, yp, percentages;

// Click function
clickArea.onclick = function (event) {
    var cx, cy;

    // Get click position
    if (navigator.appVersion.indexOf('MSIE') != -1) {
        cx = event.clientX;
        cy = event.clientY;
    } else {
        cx = event.pageX;
        cy = event.pageY;
    }

    // Relate position to element position on page
    x = cx - this.offsetLeft;
    y = cy - this.offsetTop;

    // Calculate position in percentage
    xp = Math.round ((x / clickRect.width) * 100);
    yp = Math.round ((y / clickRect.height) * 100);

    // Percentages text
    percentages = xp + '% ' + yp + '%';
    
    // Display percentages in percents span
    percents.textContent = percentages;

    // Display percentages in browser console
    console.log (percentages);
};