JSFiddle - React, Tailwind, and code Playground

HTML

<div id="console">console on top</div>

<section class="some50"></section>
<section class="some100"></section>

<section id="content">
    
    <div class="item">
        item1
    </div>
    
    <div class="item">
        item2
    </div>
    
    <div class="item">
        item3
    </div>
    
    <div class="item">
        item4
    </div>

    
</section>


<section class="some150"></section>
<section class="some50"></section>
<section class="some100"></section>

CSS

* { margin: 0px; padding: 0px; }
body { position: relative; }

#console {
    position: fixed;
    top: 10px; left: 10px;
    opacity: .7; color: #000;
    border-radius: 5px;
    border: 1px dashed #000; padding: 5px;
} 

.some50 { height: 50px; background: #eee; }
.some100 { height: 100px; background: #ddd; }
.some150 { height: 150px; background: #ccc; }

#content {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    border: 1px solid;
}

.item {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center; line-height: 50px;
    background: #aaa;
}

JavaScript

function cons(txt) {
    $('#console').text(txt);
}

$('.item').mousemove(function(e){
    var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
    
    cons('x: ' + relativeX + ' y: ' + relativeY);
});