JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<table style="width:100%;" cellspacing="0">
  <tr>
    <td class="eighty thin-border">As at the end of 2014 the level of reserves held was:</td>
    <td class="ten thin-border"></td>		
    <td class="ten thin-border"></td>
  </tr>
  <tr>
    <td class="eighty thick-border"></td>
    <td class="ten thick-border">2014<br/>£’000</td>		
    <td class="ten thick-border">2013<br/>£’000</td>
  </tr>
  <tr>
    <td class="eighty thin-border">General reserves</br>less commitments</td>
    <td class="ten thin-border">5,056<br/>(1,247)</td>		
    <td class="ten thin-border">4,779<br/>(1,221)</td>
  </tr>
  <tr>
    <td class="eighty thin-border">Free reserves<br/><br/>Target level of reserves as at 31 December<br/>Free reserves as a percentage of anticipated liabilities (Target = 100%)</td>
    <td class="ten thin-border">3,809<br/><br/>3,448<br/>110.5%</td>		
    <td class="ten thin-border">3,558<br/><br/>3,473<br/>102.5%</td>
  </tr>
</table>

CSS

table {
    color: #4a5058;
    font-size: 15px;
    margin-top: 20px;
}

td {
    border-bottom: 1px solid #4a5058;
    vertical-align: text-top;
}

td.thin-border {
    border-bottom: 1px solid #4a5058;
}

td.thick-border {
    border-bottom: 2px solid #4a5058;
}

td.hundred { width: 100%; }
td.ninety { width: 90%; }
td.eighty { width: 80%; }
td.seventy { width: 70%; }
td.sixty { width: 60%; }
td.fifty { width: 50%; }
td.forty { width: 40%; }
td.thirty { width: 30%; }
td.twenty { width: 20%; }
td.ten { width: 10%; }