JSFiddle - React, Tailwind, and code Playground

HTML

With overlay:

<div class="drop-area">
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <div class="overlay"></div>
</div>

With pointer events:

<div class="drop-area no-pointer-events">
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
</div>

Without anything:

<div class="drop-area">
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
    <span>&nbsp;</span>
</div>

CSS

div.drop-area {
    background-color: #cccccc;
    position: relative;
    width: 200px;
    height: 200px;
    margin: 20px;
}
div.drop-area.no-pointer-events > * {
    pointer-events: none;
}
div.drop-area.highlighted {
    background-color: #666666;
}
div.drop-area > div.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
div.drop-area > span {
    background-color: #999999;
    opacity: 0.25;
    float: left;
    width: 50px;
    height: 50px;
}
div.drop-area > span.highlighted {
    opacity: 1;
}
body.no-drag-and-drop {
    cursor: pointer;
    background-color: rgba(255, 0, 0, 0.1);
}

JavaScript

$('div.drop-area')
    .on('dragenter', function (event) {
        $(event.currentTarget).addClass('highlighted');
        $(event.target).addClass('highlighted');
    })
    .on('dragleave drop', function (event) {
        $(event.currentTarget).removeClass('highlighted');  
        $(event.target).removeClass('highlighted');
    });

$('body')
    .on('dragenter', function (event) {
        $(event.target).addClass('no-drag-and-drop');
        event.preventDefault();
	})
    .on('dragleave drop', function (event) {
        $(event.target).removeClass('no-drag-and-drop');
        event.preventDefault();
    })

jQuery(document).on('dragenter dragover drop', function (event) {
    event.stopPropagation();
    event.preventDefault();
});