JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas">
    
    <div class="content" id="island1">
        <p>Hello world!</p>
    </div>
    
    <div class="content" id="island2">
        <p>Hello world!</p>
    </div>
    
    <div class="content" id="island3">
        <p>Hello world!</p>
    </div>
    
    <div class="content" id="island4">
        <p>Hello world!</p>
    </div>

</div>

CSS

#canvas {
    width: 3000px;
    height: 2000px;
    background: #ededed;
}

.content {
    position: absolute;
    border: 3px solid pink;
    width: 300px;
    height: 300px;
    padding: 30px;
}

#island1 { top: 200px; left: 400px; }
#island2 { top: 300px; left: 1700px; }
#island3 { top: 700px; left: 1400px; }
#island4 { top: 1200px; left: 1900px; }

JavaScript

$(document).mousemove(function (e) {
    var winW = $(window).width(),
        docW = $(this).width() - winW,
        i = docW / winW, //increment value
        x = (e.pageX - $(window).scrollLeft()) * i;
    
    //$(window).scrollLeft(x);
    //$("html, body").animate({scrollLeft:x}, 500, 'swing');
    $("html, body").scrollLeft(x);
});

$(document).mousemove(function (e) {
    var winW = $(window).height(),
        docW = $(this).height() - winW,
        i = docW / winW, //increment value
        x = (e.pageY - $(window).scrollTop()) * i;
    
    //$("html, body").animate({scrollTop:x}, 500, 'swing');
    $(window).scrollTop(x);
});