JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<ul style="list-style-type: none;" id="sortable"><li style="display: inline;">
<div style="display: inline-block; width: 250px; height: 166px; background-color: grey; border: 1px solid black;"></div>
</li><li style="display: inline;">
<div style="display: inline-block; width: 250px; height: 166px; background-color: grey; border: 1px solid black;"></div>
</li><li style="display: inline;">
<div style="display: inline-block; width: 250px; height: 166px; background-color: grey; border: 1px solid black;"></div>
</li><li style="display: inline;">
<div style="display: inline-block; width: 250px; height: 166px; background-color: grey; border: 1px solid black;"></div>
</li><li style="display: inline;">
<div style="display: inline-block; width: 250px; height: 166px; background-color: grey; border: 1px solid black;"></div>
</li><li style="display: inline;">
<div style="display: inline-block; width: 250px; height: 166px; background-color: grey; border: 1px solid black;"></div>
</li><li style="display: inline;">
<div style="display: inline-block; width: 250px; height: 166px; background-color: grey; border: 1px solid black;"></div>
</li><li style="display: inline;">
<div style="display: inline-block; width: 250px; height: 166px; background-color: grey; border: 1px solid black;"></div>
</li><li style="display: inline;">
<div style="display: inline-block; width: 250px; height: 166px; background-color: grey; border: 1px solid black;"></div>
</li><li style="display: inline;">
<div style="display:...
JavaScript
$(function() {
$( "#sortable" ).sortable();
});