JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<div>
<ul class="sortable-queue">
    <li class="item-dragable">
        Drag me
    </li>
    <li class="item-dragable">
        Drag me
    </li>
    <li class="item-dragable">
        Drag me
    </li>
</ul>
</div>

CSS

ul {
        padding: 0;
        margin: 0;
        background-color: gray;
    }

ul:after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

    .item-dragable {
        width: 108px;
        background-color: #ccc;
        height: 150px;
        display: inline-block;
        margin: 0;
        margin-right: 11px;
        .drop-shadow(2px, 2px, 3px, 0.1);
        float: left;

        &:last-child {
            margin-right: 0 !important;
        }

        &:hover {
            cursor: pointer;
        }
    }

JavaScript

$( ".sortable-queue" ).sortable({
      revert: true,
      axis: "x",
      containment: "parent", 
      scroll: false
    });