JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    TaskName:<input type="text" value="Task1" name="Task.username"/><br>
    Department:
    <select name="task.department.id">
        <option value="1">Department1</option>
        <option value="2" selected="selected">Department2</option>
        <option value="3">Department3</option>
    </select>
    <br>
    TaskStep
    <table border=1>
        <tr>
            <th>Step Name<th>
            <th>Step Status<th>
            <th>Step Operator<th>
            <th>Set the Step order<th>
        </tr>
        <tr>
            <td><input type="text" value="step01" name="task.step.name"/><td>
            <td>
                <input type="checkbox" checked=checked />Just start
                <input type="checkbox" />On going
                <input type="checkbox" />Completed
            <td>
            <td>
                <input type="checkbox" checked=checked />Jhon
                <input type="checkbox" checked=checked />Bill
                <a href="">Add more operators</a>
            <td>
            <td>
                <a href="">up</a><br>
                <a href="">down</a>
            </td>
        </tr>
        <tr>
            <td><input type="text" value="step02" name="task.step.name"/><td>
            <td>
                <input type="checkbox" />Just start
                <input type="checkbox" checked=checked />On going
                <input type="checkbox" />Completed
            <td>
            <td>
                <input type="checkbox" checked=checked />Bill
                <input type="checkbox" checked=checked />Susan
                <a href="">Add more operators</a>
            <td>
            <td>
                <a href="">up</a><br>
                <a href="">down</a>
            </td>
        </tr>
    </table>
</form>