JSFiddle - React, Tailwind, and code Playground

HTML

<div id="panel_log"></div>

CSS

#panel_log {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background-color: #fff;
  cursor: move;
}

JavaScript

var spaceX, spaceY;

    var left = 20;
    var top = 20;

    var setPosition = function(elem, x, y) {
      elem.style.transform = 'translate3d(' + parseInt(x) + 'px, ' + parseInt(y) + 'px, ' + '0)';
      left = x;
      top = y;
    }

    setPosition(document.getElementById('panel_log'), left, top)

    var move_start = function(e) {
      var panel_log = document.getElementById('panel_log');
      
      spaceX = parseInt(left) - parseInt(e.clientX);
      spaceY = parseInt(top) - parseInt(e.clientY);

      window.addEventListener('mousemove', moving, false);
      window.addEventListener('mouseup', finishing, false);
    }
    var moving = function(e) {
      var panel_log = document.getElementById('panel_log');
      setPosition(panel_log, parseInt(e.clientX) + spaceX, parseInt(e.clientY) + spaceY)
    };
    var finishing = function(e) {
      var panel_log = document.getElementById('panel_log');
      window.removeEventListener('mousemove', moving, false);
      window.removeEventListener('mouseup', finishing, false);
    };

    document.getElementById('panel_log').addEventListener('mousedown', move_start, false);