JSFiddle - React, Tailwind, and code Playground

by htmlzengarden

HTML

<table id="test-1">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>
<table id="test-2">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>
<table id="test-3">
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
    <tr>
        <td>C</td>
        <td>D</td>
    </tr>
</table>

CSS

td
{
    padding: 1em;
}
#test-1 td
{
    border: 2px groove #DEDEDE;
}
table
{
    margin-bottom: 1em;
}
body
{
    padding: 1em;
}
#test-2 td
{
    border: 1px solid #9C9C9C;
    box-shadow: 1px 1px #DEDEDE inset, -1px -1px #DEDEDE inset;
}
#test-3 td
{
    border: 10px solid red;
    box-shadow: 10px 0 green inset, 0 10px blue inset, -10px 0 yellow inset, 0 -10px orange inset;
}