JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <span>Move the mouse over yellow box.</span>
    <span>&nbsp;</span>
  </p>

    <div class="moved">
        <div class="sumber"></div>

        <div class="tujuan">
            <div class="korban"></div>
        </div>
    </div>

CSS

div.moved { position: relative; width:620px; height:620px; top: 10px; background:blue; border:2px groove; margin: 0 auto;}
    div.tujuan { position: absolute; width:400px; height:400px; top: 0; left: 0; background:red; border:2px groove; }
        div.korban { position: absolute; width:40px; height:40px; top: 0; left: 0; background:white; border:2px groove; }
    div.sumber { position: absolute; width:200px; height:200px; bottom:0; right: 0; background:yellow; border:2px groove; cursor: pointer;}

  p { margin:0; margin-left:10px; color:red; width:220px;
      height:120px; padding-top:70px;
      float:left; font-size:14px; }
  span { display:block; }

JavaScript

$("div.sumber").mousemove(function(e){
        var left = e.pageX - $(this).offset().left;
        var top = e.pageY - $(this).offset().top;        
        $('span:first').text(left + ' ' + top);
        
        top*=2; left*=2;
        if(top > 360) top = 360;
        if(left > 360) left = 360;
        $('div.korban').css({
            'top':top,
            'left':left
        });           
});