JSFiddle - React, Tailwind, and code Playground

by robcampo

HTML

<!-- NOTE: Could/should be done with divs either -->
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>content</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>more content</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>more content</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>more content</td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

table {
    border-spacing:0;
    width: 100%;
}

table tr td {
    width: 80%;
}

table tr td:first-child {
    border-left: 3px solid green;
    width: 10%;
}

table tr td:last-child {
    border-right: 3px solid green;
    width: 10%;
}

table tr:first-child td {
    height: 70px;
    border-top: 3px solid green;
}

table tr:last-child td {
    height: 70px;
    border-bottom: 3px solid green;
}

table tr:first-child td:first-child {
    border-left: 3px solid red;
    border-top: 3px solid red;
    border-radius: 20px 0 0 0;  
}

table tr:first-child td:last-child {
    border-right: 3px solid red;
    border-top: 3px solid red;
    border-radius: 0 20px 0 0;
}

table tr:last-child td:first-child {
    border-left: 3px solid red;
    border-bottom: 3px solid red;
    border-radius: 0 0 0 20px;  
}

table tr:last-child td:last-child {
    border-right: 3px solid red;
    border-bottom: 3px solid red;
    border-radius: 0 0 20px 0;
}