JSFiddle - React, Tailwind, and code Playground

HTML

<table id='table1' class="mytable">
    <tbody class="connectedSortable">
        <tr class="table1">
            <th>col1</th>
            <th>col2</th>
            <th>col3</th>
            <th>col4</th>
        </tr>
        <tr class="table1">
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
        </tr>
        <tr class="table1">
            <td>e</td>
            <td>f</td>
            <td>g</td>
            <td>h</td>
        </tr>
    </tbody>
</table>
<table id='table2' class="mytable">
    <tbody class="connectedSortable">
        <tr class="table2">
            <th>COL1</th>
            <th>COL2</th>
            <th>COL3</th>
            <th>COL4</th>
        </tr>
        <tr class="table2">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr class="table2">
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
        </tr>
    </tbody>
</table>

CSS

.mytable a:link {
    color: #fff;
    font-weight: bold;
    text-decoration:none;
}
.mytable a:visited {
    color: #fff;
    font-weight:bold;
    text-decoration:none;
}
.mytable a:active, .mytable a:hover {
    color: #bd5a35;
    text-decoration:underline;
}
table.mytable {
    width:90%;
    font-family:Arial, Helvetica, sans-serif;
    color:#666;
    margin-left:auto;
    margin-right:auto;
    font-size:12px;
    background:#eaebec;
    border:#ccc 1px solid;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}
.mytable th {
    color:#fff;
    padding:21px 25px 22px 25px;
    border-top:1px solid #fafafa;
    border-bottom:1px solid #e0e0e0;
    background:#191970;
}
.mytable th:first-child {
    text-align: center;
    padding-left:20px;
}
.mytable tr {
    text-align: center;
    padding-left:20px;
}
.mytable tr td:first-child {
    text-align: center;
    padding-left:20px;
    border-left: 0;
}
.mytable tr td {
    padding:18px;
    border-top: 1px solid #ffffff;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa fa));
    background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
.mytable tr.even td {
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6 f6));
    background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
.mytable tr:last-child td {
    border-bottom:0;
}
.mytable tr:last-child td:first-child {
    -moz-border-radius-bottomleft:3px;
    -webkit-border-bottom-left-radius:3px;
    border-bottom-left-radius:3px;
}
.mytable tr:last-child td:last-child {
    -moz-border-radius-bottomright:3px;
    -webkit-border-bottom-right-radius:3px;
    border-bottom-right-radius:3px;
}
.mytable tr:hover td...

JavaScript

$(document).ready(function () {
    $("tbody.connectedSortable")
        .sortable({
        connectWith: ".connectedSortable",
        items: "> tr:not(:first)",
        appendTo: "parent",
        helper: "clone",
        cursor: "move",
        zIndex: 999990,
        receive: function () {
            alert("The ajax should be called");
        }
    });
});