JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sortable">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
</div>
<br /><br />
<pre id="info">Drag and drop an element, please.</pre>

CSS

#sortable {
    padding: 10px;
}
#sortable div, .placeholder {
    float: left;
    width: 108px;
    height: 30px;
    background-color: #eaeaea;
    border: 2px solid blue;
    margin: 9px; 
    text-align: center;
    padding-top: 7px;
    cursor: pointer;
}
.red-border {
    border: 2px solid red !important;
    background-color: #fefefe !important;
}
#info {
    clear: both;
    border: 1px solid #cdcdcd;
    width: 270px;
    margin: auto;
}

JavaScript

$('#sortable').sortable({
    opacity: 0.9,
    placeholder: 'placeholder red-border',
    stop: function(){
        var opacity = $(this).sortable('option', 'opacity');
        var placeholder = $(this).sortable('option', 'placeholder');
        $('#info').text('opacity = ' + opacity + '\n' + 'placeholder = ' + placeholder);
    }
});