JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/23fb458cac7f85ce075f37b969f083f355969cfa/build/output/knockout.mapping-latest.js"></script>
<script type="text/html" id="timeEntryGrid">
<tr>
  <td><input type='text' data-bind="value: EmployeeName" /></td>
  <td class="timeSheet"><input type='text' data-bind="value: TimeSheet"  class='timeSheet' /></td>
  <td><input type='date' data-bind="value: DateWorked"  class='date' /></td>
  <td class="paydate"><input type='date' data-bind="value: PayDate"  /></td>
  <td class="hours"><input type='numeric' data-bind="value: Hours" /></td>
        <td>
            <select data-bind='options:PayTypes, optionsValue:"Id",optionsText:"PayType", value: PayTypeId ' class='type'></select>
        </td>
        <td data-bind="foreach: PayTypes">
            <!-- ko if: (Id() == $parent.PayTypeId())  -->
                <select data-bind="options:PayCodes, optionsValue:'Value', optionsText:'Text', value:$parent.PayCodeId" class='type'></select>
            <!-- /ko -->
        </td>
  <td><input type='date' data-bind="value: Trade"  class='trade' /></td>
   <td><select data-bind='options:TradeOptions' class='trade'></select></td>
   <td></td>
    </tr>
</script>
<table>
<thead>
    <tr>
        <th>Employee</th>
        <th>Date Worked</th>
        <th class="paydate">Pay Date</th><th>Hours</th>
        <th>Pay Type</th><th>Pay Code</th><th>Trade</th><th>Trade<br />Worked</th>
        
        <th></th>
    </tr>
</thead>
<tbody data-bind="template: { name: 'timeEntryGrid', foreach: timeSheet.TimeEntries }"></tbody>
</table>

JavaScript

//data
var data = "{\"TimeSheetNumber\":null,\"ProjectId\":\"42f1d33a-9cec-4a78-97f6-a5ef695c870d\",\"PayPeriods\":[{\"Id\":\"e49a72e5-0fd6-45ff-926b-b55d151bb0c8\",\"ProjectId\":\"42f1d33a-9cec-4a78-97f6-a5ef695c870d\",\"PayPeriodName\":\"Union 100 Week 1\",\"PayrollCode\":\"FIELD\",\"UnionCode\":\"100\",\"StandardWorkDays\":8,\"StandardRegularHours\":8,\"StandardOvertimeHours\":0,\"StandardDoubletimeHours\":2,\"tmsTimeEntries\":[]}],\"Foreman\":\"9c517a35-302a-4886-b4df-01b44ca8b2c3\",\"TimeEntries\":[{\"Id\":\"00000000-0000-0000-0000-000000000000\",\"EmployeeId\":\"9c517a35-302a-4886-b4df-01b44ca8b2c3\",\"EmployeeName\":\"Avery, Corey D.\",\"EquipmentId\":null,\"DateWorked\":\"2012-06-10T00:00:00\",\"PayDate\":\"2012-06-10T00:00:00\",\"Hours\":0.0,\"PayTypeId\":\"00000000-0000-0000-0000-000000000000\",\"PayCodeId\":\"00000000-0000-0000-0000-000000000000\",\"EffectiveRateId\":\"00000000-0000-0000-0000-000000000000\",\"ProjectId\":\"42f1d33a-9cec-4a78-97f6-a5ef695c870d\",\"Trade\":\"ELJM\",\"CostItem\":\"00000000-0000-0000-0000-000000000000\",\"PayPeriodId\":\"00000000-0000-0000-0000-000000000000\",\"TimeSheet\":\"20120610 100 Avery, Corey D.\",\"TradeWorked\":\"ELJM\",\"TradeOptions\":[\"ELJM\",\"ELWF\",\"ELFM\"],\"PayTypes\":[{\"PayType\":\"Regular Hours\",\"Id\":\"4064258b-260d-42b2-98bf-aabf6698c18d\",\"PayCodes\":[{\"Selected\":false,\"Text\":\"Regular Hours\",\"Value\":\"4064258b-260d-42b2-98bf-aabf6698c18d\"}]},{\"PayType\":\"Overtime Hours\",\"Id\":\"b59d7f2f-2ef4-41e0-aae5-a8c3e3fd38e5\",\"PayCodes\":[{\"Selected\":false,\"Text\":\"Overtime Hours\",\"Value\":\"b59d7f2f-2ef4-41e0-aae5-a8c3e3fd38e5\"}]},{\"PayType\":\"Doubletime Hours\",\"Id\":\"575c7da6-4f4f-4e41-9c3e-11760170c21b\",\"PayCodes\":[{\"Selected\":false,\"Text\":\"Doubletime Hours\",\"Value\":\"575c7da6-4f4f-4e41-9c3e-11760170c21b\"}]},{\"PayType\":\"Room \u0026 Board\",\"Id\":\"d8b2db6b-861e-4856-aeff-34b94db3570c\",\"PayCodes\":[{\"Selected\":false,\"Text\":\"Room \u0026...