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(-10deg);
      -webkit-transform: rotate(-10deg);
      margin-top: 30px;
      margin-left: 30px;
}

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

#state {height:80px}

JavaScript

(function($){
    $.fn.overlaps = function(obj) {
        var elems = {targets: [], hits:[]};
        this.each(function() {
            var bounds = $(this).offset();
            bounds.right = bounds.left + $(this).outerWidth();
            bounds.bottom = bounds.top + $(this).outerHeight();

            var compare = $(obj).offset();
            compare.right = compare.left + $(obj).outerWidth();
            compare.bottom = compare.top + $(obj).outerHeight();

            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;
    };
}(jQuery));


var box = '#box0',
                drag = $('.drag'),
                drop = $('.drop'),
                state = $('#state');


            drag.on('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).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 collides = drop.overlaps(box);
                    $(box)[collides.hits.length ? 'addClass' : 'removeClass']('over');
               ...