JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@15.6.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.js"></script>
<script src="https://unpkg.com/react-sortable-hoc@0.6.8/dist/umd/react-sortable-hoc.js"></script>
<div id="root"></div>

CSS

.item {
  cursor: move;
  padding: 8px;
  border: 1px solid red;
}

.container {
  display: flex;
  flex-direction: row;
  direction: rtl;
}

Babel + JSX

const {arrayMove, SortableContainer, SortableElement} = SortableHOC;

const SortableItem = SortableElement(
	({value}) => <div className='item'>{value}</div>
);

const SortableList = SortableContainer(({items}) => {
  return (
    <div className='container'>
      {items.map((value, index) => (
        <SortableItem key={`item-${index}`} index={index} value={value} />
      ))}
    </div>
  );
});


class SortableComponent extends React.Component {
  state = {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],
  }
  
  onSortEnd = ({oldIndex, newIndex}) => {
    this.setState({
      items: arrayMove(this.state.items, oldIndex, newIndex),
    });
  }
  
  render() {
    return (
    	<SortableList
        items={this.state.items}
        onSortEnd={this.onSortEnd}
        lockAxis="x"
        axis="x"
      />
    );
  }
}

const App = () => {
	return (
  	<div>
      <h2>Horizontal sort</h2>
      <SortableComponent />
  	</div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));