JSFiddle - React, Tailwind, and code Playground

HTML

<div id="area">
            <div class="drag" id="box0"></div>
            <div class="drop" id="box1">1</div>
        </div>

        <div id="state"></div>

CSS

#area .drag {cursor:move; background: rgba(122, 122, 122, 0.8)}

#area > div {
       background: rgba(122, 122, 122, 0.3);
       position: absolute;
       text-align: center;
       font-size: 50px;
       width: 60px;
       height: 60px;
  }

.over {
      background: rgba(255, 0, 0, 0.5) !important;
}
.under {
      background: rgba(0, 255, 0, 0.5) !important;
}

 #box0 {
      top: 0;
      left: 0;
      z-index: 1;
      transform: rotate(-45deg);
      -webkit-transform: rotate(-45deg);
      margin-top: 30px;
      margin-left: 50px;
}

#box1 {
      transform: rotate(89deg);
      -webkit-transform: rotate(89deg);
      margin-top: 30px;
      margin-left: 100px;
}

#state {height:80px}

JavaScript

function overlaps(obj) {
        var elems = {targets: [], hits:[]};
        this.each(function() {
            var bounds = this.getBoundingClientRect();
            bounds.right = bounds.left + this.width;
            bounds.bottom = bounds.top + this.height;

            var compare = obj.getBoundingClientRect();
            compare.right = compare.left + obj.width;
            compare.bottom = compare.top + obj.height;

            if (!(compare.right < bounds.left ||
                  compare.left > bounds.right ||
                  compare.bottom < bounds.top ||
                  compare.top > bounds.bottom)
               ) {
                elems.targets.push(this);
                elems.hits.push(obj);
            }
        });

        return elems;
    };


var box = '#box0';
                var drag = document.getElementById('box0');
                var drop = document.getElementById('box1');
                var state =document.getElementById('state');


            drag.addEventListener('mousedown', function(e) {
                var elem = this,
                    start = {
                        top: parseFloat(elem.css('marginTop').replace(/px/, '')),
                        left: parseFloat(elem.css('marginLeft').replace(/px/, ''))
                    },
                    mouse = {
                        top: e.clientY,
                        left: e.clientX
                    };

                document.body.on('mousemove', function(e) {
                    var end = {
                        Y: start.top + e.clientY - mouse.top,
                        X: start.left + e.clientX - mouse.left
                    };
                    elem.css({
                        marginTop: end.Y + 'px',
                        marginLeft: end.X + 'px'
                    });

                    /*** :plugin specific code **/

                    var box=document.getElementById('box0');
                    var collides = drop.overlaps(box);
        ...