JSFiddle - React, Tailwind, and code Playground

HTML

<table style="border:1px solid purple">
     <tr id = "1">
        <td><input class="cell2" type="text" name="cell2" id="cell2" value="SAMPLE 1" /></td>
        <td><input class="cell3" type="text" name="cell3" id="cell3" value="320000.00"></td>
        <td><input class="cell4" type="text" name="cell4" id="cell4" value="8.16"></td>
        <td><input class="cell5" type="text" name="cell5" id="cell5" value ="2" ></td>
        <td><input class="cell6" type="text" name="cell6" id="cell6" value="640000.00"></td>
        <td><input class="cell7" type="text" name="cell7" id="cell7" value="16.32"></td>
        <td><input class="cell8" type="text" name="cell8" id="cell8" value="192000.00"></td>
        <td><input class="cell9" type="text" name="cell9" id="cell9" value="5"></td>
        <td><input class="cell10" type="text" name="cell10" id="cell10" value="960,000.00"></td>
        <td><input class="cell11" type="text" name="cell11" id="cell11" value="40.80"></td>
    </tr>

    <tr id = "Tr1">
        <td><input class="cell2" type="text" name="cell2" value="SAMPLE2" /></td>
        <td><input class="cell3" type="text" name="cell3" value="267314.36"></td>
        <td><input class="cell4" type="text" name="cell4" value="5.95"></td>
        <td><input class="cell5" type="text" name="cell5" value ="1" ></td>
        <td><input class="cell6" type="text" name="cell6" value="267314.36"></td>
        <td><input class="cell7" type="text" name="cell7" value="5.95"></td>
        <td><input class="cell8" type="text" name="cell8" value=""></td>
        <td><input class="cell9" type="text" name="cell9" value="1"></td>
        <td><input class="cell10" type="text" name="cell10" value=""></td>
        <td><input class="cell11" type="text" name="cell11" value=""></td>
    </tr>

    <tr id = "Tr2">
        <td><input class="cell2" type="text" name="cell2" value="SAMPLE 3" /></td>
        <td><input class="cell3" type="text" name="cell3" value="259528.50"></td>
        <td><input...