JSFiddle - React, Tailwind, and code Playground

by shadlaws

HTML

<html>
<head>
</head>
<body>
<p>Hello World!</p>
<div id="testbox"></div>
<h2 id="status">0, 0</h2>
</body>
</html>

CSS

body {margin-top: 100px; margin-left: 50px;}
#testbox {margin-top: 50px; width: 300px; height: 300px; background:#ccc;}

JavaScript

jQuery(document).mousemove(function(e){
  var x = e.pageX - $("#testbox").offset().left;
  var y = e.pageY - $("#testbox").offset().top;
  var bodytop = parseInt($("body").css("margin-top"), 10);
    $('#status').html(x +', '+ y +', body top margin: '+ bodytop);
});