JSFiddle - React, Tailwind, and code Playground
HTML
<div class="content-wrap">
<div id="flashlight"></div>
</div>
CSS
.content-wrap {
max-width:960px;
width:100%;
min-height: 592px;
margin:0 auto;
position: relative;
overflow: hidden;
background: blue;
}
#flashlight {
background: url(https://s3.amazonaws.com/ip-devs/AllState/keep-your-sanity/img/flashlight.png) center center no-repeat;
position:absolute;
z-index:999;
height:1046px;
width:1920px;
pointer-events:none;
}
JavaScript
$(document).ready(function(){
$('.content-wrap').mousemove(function(e) {
$('#flashlight').css({
'left': e.clientX-960,
'top': e.clientY-523
});
});
});