JSFiddle - React, Tailwind, and code Playground
HTML
<div data-role="page" id="Home" >
<div data-role="content">
<label for="name" style="text-align:top;margin-left: 0px;" >conductorName:</label>
<input name="name" id="name" value="" type="text" class="Name_h" autocorrect="off">
<label for="deport" style="text-align:top;margin-left: 0px;" >Deport:</label>
<input name="deport" id="deport" value="" type="text" class="deport_h" autocorrect="off">
<label for="dateandTime" style="text-align:top;margin-left: 0px;" >dateTime:</label>
<input name="dateandTime" id="dateandTime" value="" type="date" class="">
<label for="origin" style="text-align:top;margin-left: 0px;" >origin:</label>
<input name="origin" id="origin" value="" type="text" class="">
<label for="dest" style="text-align:top;margin-left: 0px;" >Destination:</label>
<input name="dest" id="dest" value="" type="text" class="">
<label for="headcode" style="text-align:top;margin-left: 0px;" >Headcode:</label>
<input name="headcode" id="headcode" value="" type="text" class="">
<label for="devicepin" style="text-align:top;margin-left: 0px;" >Devicepin:</label>
<input name="devicepin" id="devicepin" value="" type="text" class="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">customersInvited</label>
<input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
<label for="checkbox-2">customersunInvited</label>
<input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
<label for="checkbox-3">customerLeft</label>
<input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" />
<label for="checkbox-4">noFirstClassImpact</label>
...