JSFiddle - React, Tailwind, and code Playground

by AaronJohnson

HTML

<p>&nbsp;</p>
<table id="one">
    <tr>
        <td> <span>
            content
            </span>

        </td>
    </tr>
</table>
<p>&nbsp;</p>
<table id="two">
    <tr>
        <td> <span>
            content
            </span>

        </td>
        <td> <span>
            content 2
            </span>

        </td>
    </tr>
</table>

CSS

table#one {
    width:100%;
    border-spacing: 5px;
    border-collapse:separate;
}
table#two {
    width:100%;
    border-spacing:0;
    border-collapse:collapse;
}
td {
    font-weight:bold;
    text-align:center;
    background:blue;
    border-bottom:5px solid red;
    border-top:1px solid green;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}