JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<section id=options>
   
</section>

CSS

#options{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    background-image: -webkit-radial-gradient(right 50%, circle farthest-corner, #ffffff, #444444);
}

JavaScript

$('#options').on('mousemove', function(e){
              var p = $('#options');
              var offset = p.offset();
		      var mouseX = e.pageX - p.offset().left - 150;
		      var mouseY = e.pageY - p.offset().top - 150;
		      console.log("mouse-X"+mouseX +" mouse-Y"+mouseY );
		      $(this).css({'background-image': '-webkit-radial-gradient(' + mouseX + '% ' + mouseY + '%, circle farthest-corner, #ffffff, #444444)'});
});