JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
</head>
<body>
<div class="elements" id="elements">
<div class="element"style="transform:rotate(10deg);">
Hello World 1
</div>
<div class="element" style="transform:rotate(-10deg);">
Hello World 2
</div>
<div class="element" style="transform:rotate(5deg);">
Hello World 3
</div>
</div>
</body>
</html>
SCSS
.elements {
.element {
width: 150px;
height: 100px;
background-color: red;
text-align: center;
color: white;
&:nth-child(2) {
background-color: yellow;
color: black;
}
}
}
.sortable-drag {
background-color: blue!important;
/* transform: scale(0.75) rotate(-15deg) !important;*/
}
JavaScript
$(function() {
new Sortable( document.getElementById('elements'), {
animation: 150
});
});