JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<body>
    <div>
        <table cellspacing="3">
                <tr>
                    <th>8am</th>
                    <th>9am</th>
                    <th>10am</th>
                    <th>11am</th>
                   
                </tr>

            <tbody>
                <tr>
                    <td class="drop">
                        <div class="resize">
                            Session A
                        </div>
                    </td>

                    <td class="drop">
                    </td>

                    <td class="drop">
                    </td>

                    <td class="drop">
                    </td>

                   
                </tr>

                <tr>
                    <td class="drop">
                    </td>

                    <td class="drop">
                    </td>

                    <td class="drop">
                    </td>

                    <td class="drop">
                    </td>

                </tr>
            </tbody>
        </table>
    </div>
</body>

CSS

table {
    height: 100px;
}

td {
    height:68px;
    width: 150px;
    border: gray thin solid;
}

.resize {
    top: 10px;
    width: 50px;
    height: 50px;
    float: left;
    border: #002DA4 thin solid;
    border-radius: 8px;
    text-align: center;
    border-right-color: red;
    position: absolute;
}

.ui-state-highlight {
    width: 130px; height: 50px; margin: 10px;
}

td.drop {
    position: relative;
    width: 50px;
}

JavaScript

$(function(){   
	        $(".drop").sortable({
	                 connectWith:"td",
	                 placeholder: "ui-state-highlight"
	        }).disableSelection();
	    });

         $(function() {
            $( ".resize" ).resizable({
               grid: [50,0],
               handles: 'e'
            });
         });