JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/1.8.20/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="http://code.jquery.com/ui/1.8.20/jquery-ui.js"></script>

<div id="sortable">
    <div>Tab 1</div>
    <div>Tab 2</div>
    <div>Tab 3</div>
    <div>Tab 4</div>
    <div>Tab 5</div>
</div>

CSS

#sortable {
    height: 30px;
    padding: 20px 20px 0 20px;
    background: #eee;
    border-bottom: 1px solid #aaa;
    font-family: arial, verdana;
    font-size: 12px;
}
#sortable div {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin: 0 2px;
    background: #fff;
    border: 1px solid #aaa;
    border-bottom: 0;
    float: left;
    cursor: move;
}

JavaScript

$('#sortable').sortable({
    axis: 'x'
});