JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="">
<table id="scores" width="358" border="1">
  <tr>
    <th colspan="5">Activities</th>
  </tr>
  <tr class="header">
    <td width="104">Activity</td>
    <td width="163">Rating</td>
    <td width="69">Hours Per Week</td>
    <td width="163">Weeks Per Year</td>
    <td width="163">Average Hours Per Week</td>
  </tr>
  <tr>
    <td class="title"><input type="text" value=""/></td>
    <td><select name="rating">
    <option value=""></option>
      <option value="High">High</option>
      <option value="Moderate">Moderate</option>
    </select></td>
    <td class="title"><input type="text" value=""/></td>
    <td class="title"><input type="text" value=""/></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td class="title"><input type="text" value=""/></td>
    <td><select name="rating">
    <option value=""></option>
      <option value="High">High</option>
      <option value="Moderate">Moderate</option>
    </select></td>
    <td class="title"><input type="text" value=""/></td>
    <td class="title"><input type="text" value=""/></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="title">Total High</td>
    <td class="title" id="totalHigh"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td class="title">Total Moderate</td>
    <td class="title" id="totalModerate"></td>
  </tr>
  <tr>
    <td colspan="5"><button class="copy"  value="Set Value">Submit</button></td>
  </tr>
</table>

CSS

#scores tr.header {
     background-color:#c0c0c0;
}
#scores th, #scores td {
    padding: 3px;
}
#scores th {
    background-color:#006699;
    color: #FFF;
}