JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id='divConsole' onclick="take();"></div>
  <script>
    var x = 0;
    var y = 0;

    function coords() {
      divConsole.innerHTML = 'top: ' + divConsole.offsetTop + '<br>'
      + 'y: ' + event.clientY + '<br>'
      + 'left: ' + divConsole.offsetLeft + '<br>'
      + 'x: ' + event.clientX + '';

      //if (x == event.clientX) {
        var moveUp = event.clientY - y;

        divConsole.style.top = (divConsole.offsetTop+moveUp) + 'px';
        y = event.clientY;
     // } else {
        var moveRight = event.clientX - x;

        divConsole.style.left = (divConsole.offsetLeft+moveRight) + 'px';
        x = event.clientX;
      //}
    }
    function take() {
      var html = document.getElementsByTagName('html')[0];

      if (html.getAttribute('onmousemove')) {
        html.setAttribute('onmousemove', '');
      } else {
        html.setAttribute('onmousemove', 'coords();');
        x = event.clientX;
        y = event.clientY;
      }
    }
  </script>
</body>

CSS

html, body {
  overflow: hidden;
  margin: 0;
}
#divConsole {
  width: 200px;
  height: 300px;
  background: lightblue;
  overflow: auto;
  padding: 1%;
  position: absolute;
}