JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<!--Start Financial Table-->
<table class="financial-table" style="width:100%;" cellspacing="0">
    <tr>
        <td class="eighty thin-border left light"></td>
        <td class="ten thin-border right light"></td>
        <td class="ten thin-border right light"></td>
    </tr>
    <tr style="font-size: 12px !important;">
        <td class="eighty thick-border left light"><br/><br/>Emoluments</td>
        <td class="ten thick-border right"><br/>2014<br/>No.</td>
        <td class="ten thick-border right light">RIBA Group<br/>2013<br/>No.</td>
    </tr>
    <tr>
        <td class="eighty thin-border left light">£60,000 – £69,999</td>
        <td class="ten thin-border right">16</td>
        <td class="ten thin-border right light">10</td>
    </tr>
    <tr>
        <td class="eighty thin-border left light">£70,000 – £79,999</td>
        <td class="ten thin-border right">9</td>
        <td class="ten thin-border right light">7</td>
    </tr>
    <tr>
        <td class="eighty thin-border left light">£80,000 – £89,999</td>
        <td class="ten thin-border right">5</td>
        <td class="ten thin-border right light">4</td>
    </tr>
    <tr>
        <td class="eighty thin-border left light">£90,000 – £99,999</td>
        <td class="ten thin-border right">3</td>
        <td class="ten thin-border right light">3</td>
    </tr>
    <tr>
        <td class="eighty thin-border left light">£100,000 – £109,999</td>
        <td class="ten thin-border right">2</td>
        <td class="ten thin-border right light">1</td>
    </tr>
    <tr>
        <td class="eighty thin-border left light">£110,000 – £119,999</td>
        <td class="ten thin-border right">1</td>
        <td class="ten thin-border right light">2</td>
    </tr>
    <tr>
        <td class="eighty thin-border left light">£140,000 – £149,999</td>
        <td class="ten thin-border right">1</td>
        <td class="ten thin-border right light">1</td>
    </tr>
    <tr>
        <td class="eighty thin-border left...

CSS

/* Financial Table Content */
 table.financial-table {
    position: relative;
    width: 100%;
    height: auto;
    font-family:'bariol_regularregular';
    font-weight: bold;
    color: #4a5058;
    font-size: 15px;
    line-height: 1.3em;
    margin-top: 20px;
    margin-bottom: 40px;
}
table.financial-table td {
    vertical-align: text-top;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 8px;
}
table.financial-table.with-borders td {
    padding-right: 8px;
}
table.financial-table td.thin-border {
    border-bottom: 1px solid #999999;
}
table.financial-table td.thick-border {
    border-bottom: 2px solid #4a5058;
}
table.financial-table td.side-border {
    border-left: 1px solid #999999;
}
table.financial-table td.right {
    text-align: right;
}
table.financial-table td.light, table.financial-table td .light {
    font-weight: normal;
}
table.financial-table td.hundred {
    width: 100%;
}
table.financial-table td.ninety {
    width: 90%;
}
table.financial-table td.eighty {
    width: 80%;
}
table.financial-table td.seventy {
    width: 70%;
}
table.financial-table td.sixty {
    width: 60%;
}
table.financial-table td.fifty {
    width: 50%;
}
table.financial-table td.forty {
    width: 40%;
}
table.financial-table td.thirty {
    width: 30%;
}
table.financial-table td.twenty {
    width: 20%;
}
table.financial-table td.ten {
    width: 10%;
}