JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page-wrap">

    
    <div id="target-box">
        <div class="label">Target Box
            <span id="xCoordinates"></span>
        </div>
    </div>
    <div id="pointer-box">
        <div class="label">Pointer Box</div>
        <div id="pointer-wrap">
            <div id="pointer-arrow"></div>
            <div id="pointer-neck"></div>
            <div id="pointer-circle"></div>
            <div id="pointer-guide"></div>
        </div>
    </div>

</div>

CSS

#page-wrap {
    display: block; position: relative;
}

#target-box {
    display: block; position: relative; max-width: 100%; height: 50px; margin: 50px; border: 1px solid black; cursor: crosshair; background: rgba(225,225,225,1.0);
}

#pointer-box {
     display: block; position: relative; max-width: 100%; height: 300px; margin: 50px; border: 1px solid black; background: rgba(225,225,225,1.0);
 }

.label {
    display: block; position: absolute; top: -22px; left: 10px; color: #000; 
}

#pointer-wrap {
    display: block; position: absolute; top: 50%; left: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; border: 1px dashed rgba(180,180,180,1.0);
    
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
}

#pointer-circle {
    display: block; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; background: rgba(0,0,0,1.0);
    
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
}

#pointer-neck {
    display: block; position: absolute; top: 46px; left: 50%; width:6px; height: 30px; margin-left: -3px; background: rgba(0,0,0,1.0); 
}

#pointer-arrow {
    display: block; position: absolute; top: 43px; left: 50%; width: 15px; height: 15px; margin-left: -10px; background: rgba(0,0,0,0.0); border: 5px solid #000; border-bottom: none; border-right: none;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

#pointer-guide {
    display: block; position: absolute; bottom:90px; left: 50%; width:1px; height: 1000px; margin-left: -2px; background: rgba(0,0,0,0.0); border-right: 1px dashed rgba(255,0,0,0.2);
}

JavaScript

var pw = $('#pointer-wrap');
    var offset = pw.offset();
    
        function mouse(e) {

            var center_x = (offset.left) + ( $('#pointer-wrap').width() / 2 );
            var center_y = (offset.top) + ( $('#pointer-wrap').height() / 2 );
            var mouse_x = e.pageX; 
            var mouse_y = e.pageY;

            var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
            var degree = (radians * (180 / Math.PI) * -1) + 180; 
            
            pw.css('-moz-transform', 'rotate('+degree+'deg)');
            pw.css('-webkit-transform', 'rotate('+degree+'deg)');
            pw.css('-o-transform', 'rotate('+degree+'deg)');
            pw.css('-ms-transform', 'rotate('+degree+'deg)');
            
        }


            $('#target-box').mousemove(mouse);


            $('#target-box').mousemove(function(e){
        
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;                
                var xCoords = "(  x = " + x + " , y = " + y + " )";              

                $('#target-box span#xCoordinates').text(xCoords);
                
            });