JSFiddle - React, Tailwind, and code Playground

by Bertjh

HTML

<div id="parent" class="parent">
    <ul id="list" class="list">
        <li class="item">A</li>
        <li class="item">B</li>
        <li class="item">C</li>
    </ul>
</div>

CSS

.parent {
    height:64px;
    width:280px;
}
.list {
    font-size: 0;
    white-space:nowrap;
    overflow-x:scroll;
    overflow-y:hidden;
}
.list li {
    font-size: 12px;
    background-color:#404040;
    height:40px;
    width:100px;
    margin:4px;
    cursor:pointer;
    display:inline-block;
}
.list .placeholder {
    background-color:#cccccc;
}

JavaScript

$(function() {
    $('#list').disableSelection().sortable({
        scroll: true,
        placeholder: 'placeholder',
        axis: 'x',
        start: function(e, ui) {
        //    ui.placeholder.html('&nbsp;') // unquote this for fix.
        } 
    });
})