JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<table id="table"><tbody>
<tr>
<td>
<label for="name1">Enter name</label>
<input type="text" id="name1"/>
</td>
</tr>
<tr>
<td>
<label for="name2">Enter name</label>
<input type="text" id="name2"/>
</td>
</tr>
<tr>
<td>
<label for="name3">Enter name</label>
<input type="text" id="name2"/>
</td>
</tr>
</tbody>
</table>
<!--
<ul id="table">
<li>
<label for="name1">Enter name</label>
<input type="text" id="name1"/>
</li>
<li>
<label for="name2">Enter name</label>
<input type="text" id="name2"/>
</li>
</ul>-->

CSS

tr.red{
background-color : red; height: 1.5em; line-height: 1.2em;background-image:none;
}
table{margin:5px;} 
label,input{margin:1px;}
table tr td{padding:1px;}
.ui-state-highlight { height: 1.5em; line-height: 1.2em; border:5px solid #ff0000;background-color:#ff0000;background-image:none;}

JavaScript

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