JSFiddle - React, Tailwind, and code Playground

HTML

<table class="dataTable">
    <thead>
        <tr>
            <th>Flag</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> 
                <table cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                    <tr>
                        <td><div class="statusFlag1"> </div></td>
                    </tr>
                    <tr>
                        <td><div class="statusFlag1"> </div></td>
                        <td><div class="statusFlag2"> </div></td>
                    </tr>
                    <tr>
                        <td><div class="statusFlag1"> </div></td>
                        <td><div class="statusFlag2"> </div></td>
                        <td><div class="statusFlag3"> </div></td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

CSS

.dataTable {
    width: 100%;
    border-color: black;
    border-collapse: collapse;
    border-right: 1px solid #F5F2EF;
    font-size: 13px;
}

.dataTable thead, .dataTable th {
    background: #000000;
    color: #FFFFFF;
}

.dataTable thead, .dataTable th, .dataTable tbody, .dataTable td {
    padding: 2px;
    border-top: 1px solid #F5F2EF;
    border-left: 1px solid #F5F2EF;
    border-bottom: 1px solid #F5F2EF;
    border-right: 1px solid #F5F2EF;
}

.dataTable td {
    height: 25px;
}

.statusFlag1, .statusFlag2, .statusFlag3{
    -moz-border-radius: 8px/8px;
    -webkit-border-radius: 8px 8px;
    border-radius: 8px/8px;
    min-width:8px;
    min-height:8px;
}

.statusFlag1 {
    background-color: #F00000;
}

.statusFlag2 {
    background-color: #0000FF;
}

.statusFlag3 {
    background-color: #FF6600;
}