Badges with custom text and colors

<h1>Badges</h1>
        <p>This is an example of using <span class="badge" style="background-color: #C2E0F4; color: #236FA1;">user customizable</span> <span class="badge" style="background-color: #843fa1; color: #f1c40f;">badges</span> in TinyMCE. Press the <strong>third button from the right</strong> to insert or edit a badge.</p>
        <table style="border-collapse: collapse; width: 100%;" border="1">
            <thead>
                <tr style="background-color: #ecf0f1;">
                    <td style="width: 50%; vertical-align: top;"><strong>Project</strong></td>
                    <td style="width: 50%; vertical-align: top;"><strong>Status</strong></td>
                </tr>
            </thead>
            <tbody>
                <tr style="height: 22px;">
                    <td style="width: 50%; height: 22px; vertical-align: top;">Hazelnut migration</td>
                    <td style="width: 50%; height: 22px; vertical-align: top;"><span class="badge" style="background-color: #2DC26B; color: rgb(255, 255, 255);">On track</span></td>
                </tr>
                <tr style="height: 22px;">
                    <td style="width: 50%; height: 22px; vertical-align: top;">Apollo rollout (second stage)</td>
                    <td style="width: 50%; height: 22px; vertical-align: top;"><span class="badge" style="background-color: #F1C40F; color: #34495E;">Need attention</span> <span class="badge" style="background-color: #E03E2D; color: rgb(255, 255, 255);">Off track</span></td>
                </tr>
                <tr>
                    <td style="width: 50%; vertical-align: top;">Apollo rollout (initial stage)</td>
                    <td style="width: 50%; vertical-align: top;"><span class="badge" style="background-color: #3598db; color: #c2e0f4;">Ready for release</span></td>
                </tr>
            </tbody>
        </table>