JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
	<div class="child"></div>
</div>

<div class="debug"></div>

CSS

.parent{
	position:relative;
	display:inline-block;
	width:400px;
	height:400px;
	margin:10px;
	padding:10px;
	background-color:#3F62FF;
}

.child{
	position:absolute;
	display:inline-block;
	width:200px;
	height:200px;
	margin:10px;
	padding:10px;
	background-color:#BFCAFF;
	top:20px;
	right: 20px;
}

JavaScript

$(document).ready(function($){
	$(".parent").mousemove(function(event){
        $(".debug").html("X: "+ event.offsetX +"<br>Y: "+ event.offsetY);
	});
});