JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div id="scene">
    <div id="obj-1" class="object">Drag me</div>
  </div>
</div>

CSS

body { 
      width: 100%;
      height: 100%;
      font-size: 100%; 
      background-color: #F1F2F3;
      
    }
    
    .container {
      font-size: 200%;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 10em;
      height: 10em;
      margin: -5em 0 0 -5em;
      -webkit-perspective: 400px;
    }

    #scene { 
      width: 100%;
      height: 100%;
      background: #333;
      -webkit-transform-style: preserve-3d;
      -webkit-transform: rotateX( 60deg ) rotateZ( 90deg ); 
      background-image: -webkit-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -webkit-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
      -webkit-background-size:1em 1em;
    }

    .object {
      position: absolute;
      width: .5em;
      height: .5em;
      background: white;
      -webkit-transform-style: preserve-3d;
      -webkit-transform-origin: 2em;
      -webkit-transition: transform .1s linear;
    }

    .object:hover{
      cursor: -webkit-grab;
    }

    .object:active {
      cursor: -webkit-grabbing;
    }

    #obj-1 { left: 0em; top: 9.5em ; }

JavaScript

var object = document.getElementsByClassName('object'),
    mouseDown = false;

function initMove() {

    for(var i=0; i<object.length; i++) { 

      object[i].addEventListener("mousedown", function(event) {
        mouseDown = true;
        grabbed = $(this);
        startX = (event.pageX - $('#scene').offset().left);
        startY = (event.pageY - $('#scene').offset().top);
        curX = parseFloat($(this).css('left'));
        curY = parseFloat($(this).css('top'));
      }, false);

    }

    document.addEventListener("mousemove", function (event) {
      if (mouseDown == true) {
        event.preventDefault();
          
        dragY = event.offsetY;  
        dragX = event.offsetX;
        dragobject(grabbed);
      };
    }, false);

    document.addEventListener("mouseup", function(event) {
      mouseDown = false;
      grabbed.css('left', Math.round(dragX) + 'px');
      grabbed.css('top', Math.round(dragY) + 'px');
      startX = 0;
      startY = 0;
      distX = 0;
      distY = 0;
    }, false);

}

function dragobject(grabbed) {
  grabbed.css('left', dragX + 'px');
  grabbed.css('top', dragY + 'px');
}

function init() {
  initMove();
  document.onselectstart = function(){ return false; }
};

init();