JSFiddle - React, Tailwind, and code Playground

HTML

<table width="100%">
<tr>
    <td>&nbsp;.&nbsp;</td>
    <td>&nbsp;.&nbsp;</td>
    <td>&nbsp;.&nbsp;</td>
    <td>&nbsp;.&nbsp;</td>
</tr>
<tr>
    <td colspan="4"><p style="text-align:left;">Some text here</p></td>
</tr>
<tr>
    <td>&nbsp;.&nbsp;</td>
    <td>&nbsp;.&nbsp;</td>
    <td>&nbsp;.&nbsp;</td>
    <td>&nbsp;.&nbsp;</td>
</tr>
</table>

CSS

table tr:first-child td {
    border-bottom: 1px dotted #000;
}
table tr:nth-child(2) td {
    border-bottom: 1px solid #0f0;
}
td {text-align: center;margin:0;padding:0;border-left: 1px solid #ff0000;border-right: 1px solid #ff0000;}
table{
    border-collapse: collapse;
}
td:nth-child(3) {
    width: 20px;
}