JSFiddle - React, Tailwind, and code Playground

HTML

<table id="tbl1">
    <tbody>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
        </tr>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data3</td>
        </tr>
        <tr>
            <td>Data4</td>
            <td>Data5</td>
            <td>Data6</td>
        </tr>
        <tr>
            <td>Data7</td>
            <td>Data8</td>
            <td>Data9</td>
        </tr>
        <tr>
            <td>Data10</td>
            <td>Data11</td>
            <td>Data12</td>
        </tr>
        <tr>
            <td>Data13</td>
            <td>Data14</td>
            <td>Data15</td>
        </tr> 
    </tbody>
</table>
<hr/>
<table id="tbl2">
    <tbody>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
        </tr>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data3</td>
        </tr>
        <tr>
            <td>Data4</td>
            <td>Data5</td>
            <td>Data6</td>
        </tr>
        <tr>
            <td>Data7</td>
            <td>Data8</td>
            <td>Data9</td>
        </tr>
        <tr>
            <td>Data10</td>
            <td>Data11</td>
            <td>Data12</td>
        </tr>
        <tr>
            <td>Data13</td>
            <td>Data14</td>
            <td>Data15</td>
        </tr> 
    </tbody>
</table>

CSS

table tbody{
    background-color: greenYellow;
}


table tbody th{
    background-color: green;
}

.selectedRow{
    background-color: #abcdef;
}

JavaScript

$(function() {
	$('table tbody').sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'move',
		connectWith: 'tbl2',
        axis: 'y',
        dropOnEmpty: true
	});
    
    $('table tr').on('click', function () {
        $(this).toggleClass('selectedRow');
    });
});