JSFiddle - React, Tailwind, and code Playground

by qu4ntyl

HTML

<script src="https://sortablejs.github.io/Sortable/Sortable.js"></script>
			<div id="gridDemo" class="col">
			  <div class="grid-square full-width">Item 1</div>
			  <div class="grid-square full-width">Item 2</div>
			  <div class="grid-square">Item 3</div>
			  <div class="grid-square">Item 4</div>
			</div>

CSS

.full-width {
  width: 100% !important;
}

.grid-square {
    width: 100px;
    height: 50px;
    display: inline-block;
    background-color: #fff;
    border: solid 1px rgb(0,0,0,0.2);
    padding: 10px;
    margin: 12px;
}

JavaScript

gridDemo = document.getElementById('gridDemo');

// Grid demo
new Sortable(gridDemo, {
	animation: 150,
	ghostClass: 'blue-background-class'
});