JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<table id="myTable">
<tbody>
<tr>
<th colspan="3">Table Header</th>
</tr>
<tr>
<td>Redemption Amount at Full Term</td>
<td>£ 326,057</td>
<td>?</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>?</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>?</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>?</td>
</tr>
<tr>
<td>123</td>
<td>123</td>
<td>?</td>
</tr>
</tbody>
</table>

CSS

#red {color:#B93F3C;}
#blue {color:#3773B2;}
#grey1 {color:#F3F3F3;}
#grey2 {color:#E1E1E1;}

#myTable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#myTable td, #myTable th {

  padding: 8px;
}

#myTable tr:nth-child(even){background-color: #f2f2f2;}

#myTable tr:hover {background-color: #ddd;}

#myTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #3773B2;
  color: white;
}

#myTable tr {
border-collapse: collapse;
border: 1px solid #ddd;
}

#myTable td:last-child {text-align:right;}

/* hmmm */