JSFiddle - React, Tailwind, and code Playground

by Brian Blakely

HTML

<table>
                    <thead>
                        <tr>
                            <td></td>
                            <th scope="col">
                                <span class="before"></span>
                                fresh fruit options
                            </th>
                            <th scope="col">
                                <span class="before"></span>
                                liquid choices
                            </th>
                            <th scope="col">
                                <span class="before"></span>
                                add-in possibilities
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">
                                <img src="images/fpo_ingredient.jpg" alt="" />
                            </th>
                            <td>
                                <span class="valign-content">
                                    Apples
                                </span>
                                <span class="valign-helper"></span>
                            </td>
                            <td>
                                <span class="valign-content">
                                   Creamy French Dressing
                                </span>
                                <span class="valign-helper"></span>
                            </td>
                            <td>
                                <span class="valign-content">
                                    Cracked Black Peppercorns
                                </span>
                                <span class="valign-helper"></span>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="4"></td>
                        </tr>
                        <tr>
      ...

CSS

th {
    position: relative;
}
th .before {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: red;
}