JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="row">
    <div class="col-lg-9 col-md-9">
        <div id="edit-area">
            <div class="content droppable"></div>
            <div class="content droppable"></div>
            <div class="content droppable"></div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3" id="componentes">
        <div class="list-group">
            <button class="list-group-item" data-componente="textbox">Textbox Group</button>
            <button class="list-group-item" data-componente="input">Input</button>
            <button class="list-group-item" data-componente="btn">Botão</button>
        </div>
    </div>
</div>

CSS

#edit-area {
    display: block;
    margin-bottom:20px;
    box-sizing: content-box;
    min-height: 200px;
    position: relative;
    overflow: auto;
    background: #E0E0E0;
}
.content {
    background:white;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    margin:10px;
    padding:5px;
    min-height:50px;
}
.list-group-item {
    width: 300px !important;
}

.component {
    display:inline-block;
    padding:5px 10px;
    margin: 5px 10px;
    background-color: #4072b4;
    color:#FFF;
}

.floating {
    position:fixed;
}

JavaScript

$(document).ready(function () {
    var targetEl = $('.droppable');
    //var target = targetEl.getBoundingClientRect();
    var startPosition;
    var dragging = null;
    var offset;

    function offsetDiff(el, ev) {
        var elPos = el.getBoundingClientRect();
        return {
            x: ev.pageX - elPos.left,
            y: ev.pageY - elPos.top
        }
    }

    function isInsideTarget(el) {
        var elPos = el.getBoundingClientRect();
        
        var is = false;
        
        targetEl.each(function(){
            var target = this.getBoundingClientRect();
            var alignedX = target.left <= elPos.left && target.right >= elPos.right;
            var alignedY = target.top <= elPos.top && target.bottom >= elPos.bottom;
            if (alignedX && alignedY){
                is = true;
                return false;
            }
        });
        
        
        return is;
    }

    function drop(el, cancel) {
        dragging = null;
        el.style.position = 'relative';
        el.style.left = 'auto';
        el.style.top = 'auto';
        if (cancel) return;
        // Manter a classe draggable para que seja possível 
        // reposicionar o elemento
        // el.classList.remove('draggable');
        // Como identificar se tem elementos após o local onde soltei
        // o elemento e coloca-lo nessa posição, em vez de coloca-lo 
        // com no final com append?
        $(targetEl).append(el);
    }

    $(document.body).on("mousemove", function (e) {
        if (!dragging) return;
        $(dragging).offset({
            top: e.pageY - offset.y,
            left: e.pageX - offset.x
        });

    });

    $(document.body).on('mousedown', '.draggable', function (e) {
        dragging = e.target;
        $(this).removeClass('floating')
        offset = offsetDiff(dragging, e);
        startPosition = dragging.getBoundingClientRect();

    });

    $(document.body).on("mouseup", function (e) {
        if (!dragging)...