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>
        
    </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-wrap:hover {
    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(15deg);
     -moz-transform: rotate(15deg);
     transform: rotate(15deg);
}


#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);
}

JavaScript

$(document).ready(function(){

    var tbW = $('#target-box').width();
    var pwW = $('#pointer-wrap').width();

    //  Looking for a formula that will set the initial arrow rotation to point  to the left border of the target-box at any browser width. This will be  the target-box cursor x=0 position.         

    // This is just a wild guess at a formula that obviously doesn't work properly
    
    var startingRotatePosition = ( tbW / pwW ) - (tbW * 0.1 ) ;
    
    alert(startingRotatePosition);
    
    $('#pointer-wrap').css({ 
        
        "-moz-transform" : "rotate(" + startingRotatePosition + "deg)" ,
        "-webkit-transform" : "rotate(" + startingRotatePosition + "deg)" ,
        "transform" : "rotate(" + startingRotatePosition + "deg)" 
        
    });
    


    
    //Rotating the arrow based on cursor x position while in the target-box
    $('#target-box').mousemove(function(e){
        
        var x = e.pageX - this.offsetLeft;         
        var xCoords = "(  x = " + x + " )"; 

        // Looking for a formula that will keep the arrow rotation proportions on window resize
        // This is just a wild guess at a formula that obviously doesn't work properly
        
        var xRtt = ( x * ( pwW / tbW ) - ( tbW * 0.1 ) );                

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


        $('#pointer-wrap').css({ 
            
            "-moz-transform" : "rotate("+xRtt+"deg)" ,
            "-webkit-transform" : "rotate("+xRtt+"deg)" ,
            "transform" : "rotate("+xRtt+"deg)" 
        
        });
    
        
    });
    
    
});