JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   
    <div id="container001" class="container">
      <div id="" class="SingleItem">
            <div class="title"><i class="fa fa-bars el-handle"></i></div>
            <div>Contenido</div>
        </div>
    </div>
    <div id="container002" class="container">
       <div id="item2" class="SingleItem">
            <div class="title"><i class="fa fa-bars el-handle"></i></div>
            <div>Contenido</div>
        </div>
        <div id="item3" class="SingleItem">
            <div class="title"><i class="fa fa-bars el-handle"></i></div>
            <div>Contenido</div>
        </div>
    </div>
    <div id="container003" class="container"></div>
    <div id="container004" class="container"></div>

CSS

#unassignedContainer
        {
            display: inline-block;
            background-color: #F5F5DC;
            border: 1px solid blue;
            width: 370px;
            height: 200px;        
            padding: 10px 10px 10px 10px;    
        }
        .SingleItem
        {
            display: inline-table;
            background-color: #ACAC21;
            border: 1px solid blue;
            width: 70px;
            height: 70px;
        }
        .SingleItem .title
        {
            display: block;
            background-color: #1CA221;
            border: 1px solid red;
            width: 70px;
            height: 20px;
            cursor: move;
        }
        .container
        {
         
            background-color: gray;
            border: 1px solid blue;
            width: 150px;
            float: left;
            height: 150px;
        } 
        .el-handle {
          display: block;
        }

JavaScript

$(function () {
            $(".container").sortable({
                connectWith: ".container",
                handle: ".el-handle",
                revert: true
            });
      });