JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<table>
    <tr><td>2 farthings</td><td>=</td><td>1 halfpenny</td></tr>
    <tr><td>4 farthings</td><td>=</td><td>1 penny</td></tr>
    <tr><td>12 pennies</td><td>=</td><td>1 shilling</td></tr>
    <tr><td>5 shillings</td><td>=</td><td>1 crown</td></tr>
    <tr><td>4 crowns</td><td>=</td><td>1 pound</td></tr>
    <tr><td>21 shillings</td><td>=</td><td>1 guinea</td></tr>
</table>

CSS

table, td {
    border-color: #600;
    border-style: solid;
}

table {
    border-width: 1px 1px 1px 1px;
    border-spacing: 0;
    border-collapse: collapse;
    margin: 0 auto;
    width: auto;
}

td {
    margin: 0;
    padding: 4px 4px;
    border-width: 1px 1px 0 0;
    background-color: #F5F2F0;
    border-left: 0;
    border-right: 0;
}