JSFiddle - React, Tailwind, and code Playground

HTML

<p id="monitor">monitor</p>
<div id="myDiv"></div>

CSS

body {
    height: 100%;
    background: grey;
}
#myDiv {
    width: 100px;
    height: 100px;
    background-color: rgb(35, 82, 153);
    position: absolute;
}

JavaScript

window.onload = function() {    
    
    var myDiv = document.getElementById('myDiv');
    
    function show_coords(){
    var monitor = document.getElementById('monitor');
    var x = event.clientX - myDiv.clientWidth / 2;
    var y = event.clientY - myDiv.clientWidth / 2;
    monitor.innerText = "X: " + x + "\n" + "Y: " + y;
    myDiv.style.left = x + "px";
    myDiv.style.top = y + "px";
    }
    
    document.onmousemove = function(){
        if(myDiv.innerText == "YES"){show_coords();}
    }
    
    myDiv.onmousedown = function(){
        myDiv.innerText = "YES";
    }
    myDiv.onmouseup = function(){
        myDiv.innerText = "NO";
    }
    

    
}