JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td class="rb"></td>
        <td class="tb"></td>
        <td class="tb rb"></td>
        <td></td>
    </tr>
    <tr>
        <td class="rb"></td>
        <td></td>
        <td class="rb"></td>
        <td></td>
    </tr>
    <tr>
        <td class="rb"></td>
        <td></td>
        <td class="rb"></td>
        <td></td>
    </tr>
    <tr class="last">
        <td class="nb rb"></td>
        <td class="bb"></td>
        <td class="bb rb"></td>
        <td class="nb"></td>
    </tr>
</table>

CSS

table{
    border-collapse: collapse;
}

table td{
    width: 150px;
    height: 30px;
    border: 1px #CCC solid;
    border-bottom: transparent
}

table tr+tr td{
    border-top: none;
}

table tr.last td{
    border-top: 1px #CCC solid;
}

table .nb{border: none;}
table .tb{border-top: 1px green solid;}
table .bb{border-bottom: 1px green solid;}
table .rb{border-right: 1px green solid!important;}