JSFiddle - React, Tailwind, and code Playground

HTML

<div class="isdroppablearea">
    <strong>A</strong><br />
    <br />
    This is the droppable area
</div>
<div class="droppable">
    <strong>B</strong><br />
    <br />
    This must be the droppable area
</div>
<div class="draggable">
    <strong>C</strong><br />
    <br />
    Drag me
</div>

CSS

.drop-hover {
    background: blue !important;
}
.droppable {
    background: #ddd; 
    height: 300px;
    left: 150px;
    position: absolute;
    text-align: center;
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
    width: 150px;
}
.droppable:hover {
    background: green !important;
}
.isdroppablearea {
    background: #fafafa;
    height: 300px;
    position: absolute;
    left: 58px;
    text-align: center;
    top: 15px;
    width: 150px;
}
.draggable {
    background: #f00;
    color: #fff;
    height: 300px;
    position: absolute;
    text-align: center;
    top: 340px;
    width: 150px;
}

JavaScript

$('.droppable').droppable({
    hoverClass: 'drop-hover',
    tolerance: 'pointer',
    drop: function(e, ui) {
        alert('drop');   
    }
});
$('.draggable').draggable();