JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<table cellpadding="0" cellspacing="0">
    <thead>
        <th>
            <div class="positioning">
                Left
                <div class="img">&nbsp;</div>
            </div>
        </th>
        <th>
            <div class="positioning">
                Center
                <div class="img">&nbsp;</div>
            </div>
        </th>
        <th>
            <div class="positioning">
                Right
                <div class="img">&nbsp;</div>
            </div>
        </th>
    </thead>
    <tbody>
        <td>Left</td>
        <td>Center</td>
        <td>Right</td>
    </tbody>
</table>

CSS

table {
    border: 10px solid rgb(230,230,230);
    color: white;
}
table thead th,
table tbody td {
    background: black;
    border: solid 1px white;
    font: bold 12px Helvetica, Arial, sans-serif;
    padding: 10px;
}
table thead th {
    padding: 0;
    text-align: center;
}
table thead .positioning {
    padding: 10px 32px;
    position: relative;
}
table thead .img {
    background: red;
    height: 12px;
    margin-top: -6px;
    position: absolute;
    right: 10px;
    top: 50%;
    width: 12px;
}