JSFiddle - React, Tailwind, and code Playground

by Satyanshu Acharya

HTML

<div id="main">
    <div id="sub1"></div>
    <div id="sub3"></div>
    <div id="sub2"></div>
    <div id="sub4"></div>
    <div id="sub6"></div>
    <div id="sub5"></div>
    <div id="sub7"></div>
    <div id="sub9"></div>
    <div id="sub8"></div>
</div>

CSS

*{
    float:left;        
}
#main{
   
    height:15em;
    width:20em; 
    float:left;    
}

.ui-state-highlight { height: 5em; width: 5em;}

#sub1,#sub2,#sub4,#sub5,#sub7,#sub8{    
    height:5em;
    width:5em;    
}
#sub1{
    background-color:green;      
}
#sub2{
    background-color:blue;  
}
#sub3{
    background-color:lightgreen;  
}
#sub4{
    background-color:lightblue;  
}
#sub5{
    background-color:violet;  
}
#sub6{
    background-color:yellow;  
}
#sub7{
    background-color:magenta;  
}
#sub8{
    background-color:grey;  
}
#sub9{
    background-color:olive;  
}
#sub9{
    background-color:pink;  
}


#sub3,#sub6,#sub9{   
    height:5em;
    width:10em;
    position: relative;    
}

JavaScript

$(function(){

    $('#main').sortable({
      placeholder: "ui-state-highlight"
    });
    $('#main').disableSelection();

})