JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td id = "test2">
            test
        </td>
        <td id = "test3">
            test
        </td>
    </tr>
    <tr>
        <td id = "test4">
            test
        </td>
        <td id = "test5">
            test
        </td>

    </tr>
</table>

CSS

table {
    border-collapse:separate;
    border-spacing:2px 0;
}
td {
    border-bottom:#1C9AD5 dotted 2px;
}
#test2 {
    width: 30px;     
}
#test3 {
    width: 30px;
}
#test4 {
    width: 30px;
}
#test5 {
    width: 30px;
}
#test6 {
    width: 30px;
}