JSFiddle - React, Tailwind, and code Playground

by Greg Borreson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.10.1/Sortable.min.js"></script>
<div class="scaled-container" style="transform: scale(0.99)">
    <div class="container">
        <div class="sortable">
            <div class="item">First item</div>
            <div class="item">Second item</div>
            <div class="item">Third item</div>
        </div>
    </div>
</div>

CSS

.scaled-container {
    top: 50px;
}
.container {
    position: absolute;
    top: 50px;
}
.sortable {
    margin: 50px auto 0px;
}
.item {
    font-size: 30px;
    background-color: grey;
    width: 200px;
    height: 60px;
    margin: 10px;
}

JavaScript

var el = document.querySelector('.sortable');
var sortable = Sortable.create(el, { animation: 250, forceFallback: true });