JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <table>
        <thead>
            <tr>
                <td>Code</td>
                <td>Name</td>
                <td>Address</td>
                <td>Phone</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="badge_container">
                        <span class="badge" data-color="pink" data-id="24"></span><span class="badge" data-color="brown" data-id="22"></span>
                    </div>
                    001
                </td>
                <td>Charles</td>
                <td>Elm Street 66, Austin, Texas, USA</td>
                <td>555444111</td>
            </tr>
            <tr>
                <td>
                    <div class="badge_container">
                        <span class="badge" data-color="pink" data-id="24"></span><span class="badge" data-color="brown" data-id="22"></span>
                    </div>
                    002
                </td>
                <td>Michael</td>
                <td>Wall Street 1, New York City, USA</td>
                <td>555444222</td>
            </tr>
            <tr>
                <td>
                    <div class="badge_container">
                        <span class="badge" data-color="pink" data-id="24"></span><span class="badge" data-color="brown" data-id="22"></span>
                    </div>
                    003
                </td>
                <td>Jane</td>
                <td>Sesame Street 123, Chicago, Illinois, USA</td>
                <td>555444222</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

/* Skip that stuff. Not important */
* {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 14px;
    color: #444;
}

.container {
    margin: 40px;
    width: 400px;
}

table{
    border-spacing: 2px;
    border-collapse: separate;
}

thead {
    font-weight: bold;
}

thead tr {
    background-color: #ECFBD7;
    border-bottom: 1px solid lightgray;
}

thead td {
    border-bottom: 1px solid lightgray;
}

td {
    margin: 2px;
    padding: 2px 6px;
    height: 30px;
    line-height: 24px;
}


tbody tr:nth-child(2n+1) td {
    background-color: #F7FFEB;
}

tbody tr:nth-child(2n) td {
    background-color: #ECFBD7;
}

span.badge[data-color="pink"] {
    background: radial-gradient( center -9px, circle closest-side, white 0, #F6C 26px );
    background: -moz-radial-gradient( center -9px, circle closest-side, white 0, #F6C 26px );
    background: -ms-radial-gradient( center -9px, circle closest-side, white 0, #F6C 26px );
    background: -o-radial-gradient( center -9px, circle closest-side, white 0, #F6C 26px );
    background: -webkit-radial-gradient( center -9px, circle, white 0, #F6C 26px );
    background-color: #F6C;
}
span.badge[data-color="brown"] {
    background: radial-gradient( center -9px, circle closest-side, white 0, #C63 26px );
    background: -moz-radial-gradient( center -9px, circle closest-side, white 0, #C63 26px );
    background: -ms-radial-gradient( center -9px, circle closest-side, white 0, #C63 26px );
    background: -o-radial-gradient( center -9px, circle closest-side, white 0, #C63 26px );
    background: -webkit-radial-gradient( center -9px, circle, white 0, #C63 26px );
    background-color: #C63;
}

.badge_container .badge {
    display: inline-block;
    border: 2px solid white;
    border-radius: 50%;
    height: 10px;
    text-align: center;
    width: 10px;
    margin-right: 1px;
}

/* Important styles */
td{
    position: relative;
}

.badge_container{
    position: absolute;
    top: -5px;
    left:...