JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <script>

    function getPos(e){
        x=e.clientX;
        y=e.clientY;
        cursor="Your Mouse Position Is : " + x + " and " + y ;
        document.getElementById("displayArea").style.display = 'block';
        document.getElementById("displayArea").innerHTML=cursor;
        document.getElementById("displayArea").style.right =  x + 'px';
        document.getElementById("displayArea").style.top =  y + 'px';
    }

    function stopTracking(){
        document.getElementById("displayArea").style.display = 'none';
        document.getElementById("displayArea").innerHTML="";
    }

    </script>
</head>

<body>
    <div id="focusArea" onmousemove="getPos(event)" onmouseout="stopTracking()"><p>Mouse Over This Text And Get The Cursor Position!</p></div>

    <p id="displayArea"></p>
</body>
</html>

CSS

#displayArea {background:#fff; border:1px solid #ccc;padding:5px;float:left;width:auto;display:none;position:absolute;top:0}
#focusArea {cursor:pointer; position:relative;width:100%
height:50px}