JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
 <title> Mouse Positions !! </title>
</head>
    
<body>
    <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
    <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
    <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
 </body>

</html>

CSS

#A,#B,#C { width:100px;height:100px;cursor:pointer;background:#2f2f2f;position:absolute;top:50px;color:#fff;font:bold 15px Arial; }

JavaScript

$(document).ready(function(e) {
    $('#A').click(function(e) {
        alert(e.pageX+ ' , ' + e.pageY);
    });    
    $('#B').click(function(e) {
        var posX = $(this).offset().left, posY = $(this).offset().top;
        alert((e.pageX - posX)+ ' , ' + (e.pageY - posY));
    });
    $('#C').click(function(e) {
        var posX = $(this).position().left,posY = $(this).position().top;
        alert( (e.pageX - posX) + ' , ' + (e.pageY - posY));
    });
});