JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="inner">
        <div id="cursor"></div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

#outer {
    width: 100%;
    height: 100%;
    position: absolute;
    cursor: pointer;
    z-index: 1000;
    background-color: red;    
}

#inner {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 200px;
    top: 200px;
    background-color: yellow;
    cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAXCAYAAADtNKTnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAjnRFWHRDb21tZW50AGNIUk0gY2h1bmtsZW4gMzIgaWdub3JlZA1BU0NJSTogLi56JS4uLi4uLi4lLi4uLi4ubV8uLi5sLi48Li4uLlgNSEVYOiAwMDAwN0EyNTAwMDA4MDgzMDAwMEY0MjUwMDAwODREMTAwMDA2RDVGMDAwMEU4NkMwMDAwM0M4QjAwMDAxQjU4GN773QAAAgFJREFUeJyUlEtLAlEUx0cd7YFagUkvxKIgiB4USEREUNAqWgvtatEnaNVnaVWrNrVoEURFT6JCxBDDIpKScGG5EATR2/9MZ6ZrjjJe+MHMmXt+c+65c0cRQihEuVy2lUolO0HXetwKil31valN3SFFUVygFTQDJ7CBhiSHYA45ncAHvI2INMlH+lNAcgRWkDMI+kCbVZEmwYVg0SlYRc7of5EliSS6AGtIHLMqqpBIoiuwblVUJZFE12Yis+03leBbEanUu2VRlYQExWJRFAoF8fzyWlMkL61CIgvy+bzI5XIiHk/UFdH2GxIzQTabFZlMRkQiUTPR3wdJknqCdDqN/qTE7e2dwNwrJM2AEdDFx8SuSWTB01PSEODZjcQ1uGQJVRMAHuDQJLLA1ezL7ezuaRVw4pbb27OEyfNgGkyAIdAN3IZEEnyDDcQepSXEMHEBzIJxEOSD6uGT/7scFnyBMIJziJ3s7x+KZDJJkmOwyRJaRi8LnJqAd+cIyVmwiNthMIVYGEQTiYQ4OzsnUZTk9KyiF3y69aHy3tPWDThcPX1IPCBBLBYjyT1XEuJ+dHBOxaCymvgN7WikG4kB8AC2wTLik9zUfn5hlUQXqQyValNdfjugb8HPDQ3ydavRD31N8rpMBklb+O1eFlDM+OOZ/2RqV+mQK9Dn/wAAAP//AwCGMlcrSCX+UAAAAABJRU5ErkJggg=='), auto;
}

#cursor {
    position: absolute;
    width: 17px;
    height: 23px;
    background-image:...

JavaScript

var cursor = document.getElementById('cursor');
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');

window.addEventListener('mousemove', function(e) {
    var x = (e.clientX - inner.offsetLeft);
    var y = (e.clientY - inner.offsetTop);
    
    if (x >= 0 && x < inner.clientWidth && y >= 0 && y < inner.clientHeight) {
		cursor.style.display = 'none';
    } else {
        cursor.style.display = 'block';
    }
    
    x = Math.max(0, Math.min(inner.clientWidth - 1, x));
    y = Math.max(0, Math.min(inner.clientHeight - 1, y));
    
    cursor.style.left = x + 'px';
    cursor.style.top = y + 'px';
});