JSFiddle - React, Tailwind, and code Playground

by Shaunak Deshpande

HTML

<div id="main">
    <br>
    <br>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="five"></div>
    <div id="six"></div>
    <div id="seven"></div>
</div>

CSS

#main {
    height:450px;
    overflow:auto;
    background-color:white;
}
#one {
    height:50px;
    width : 200px;
    background-color:purple;
    margin-left:120px;
    color:white;
}
#two {
    height:50px;
    width : 200px;
    background-color:indigo;
    margin-left:120px;
    opacity:0.9;
}
#three {
    height:50px;
    width : 200px;
    background-color:blue;
    margin-left:120px;
}
#four {
    height:50px;
    width : 200px;
    background-color:green;
    margin-left:120px;
}
#five {
    height:50px;
    width : 200px;
    background-color:yellow;
    margin-left:120px;
}
#six {
    height:50px;
    width : 200px;
    background-color:orange;
    margin-left:120px;
}
#seven {
    height:50px;
    width : 200px;
    background-color:red;
    margin-left:120px;
}

JavaScript

$("#main").sortable();
$("#main").disableSelection();