Status Colors Table

<!DOCTYPE html>
<title>My Example</title>

.status-colors-table thead th {
    padding: 12px;
    background-color: #f2f2f2;
    border-bottom: 2px solid #ccc;
    text-align: left;
    font-weight: 600;
}

.status-colors-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}
.status-colors-table .status-text {
    font-weight: bold;
}

/* --- Status Color Classes --- */
/* You would apply one of these classes to the <tr> element */

/* Success / OK / Passed (Green) */
.row-success { background-color: #e8f5e9; }
.row-success .status-text { color: #2e7d32; }

/* Warning / Pending / In-Progress (Yellow) */
.row-warning { background-color: #fffde7; }
.row-warning .status-text { color: #f57f17; }

/* Danger / Failed / Error (Red) */
.row-danger { background-color: #ffebee; }
.row-danger .status-text { color: #c62828; }

/* Info / Neutral (Blue) */
.row-info { background-color: #e3f2fd; }
.row-info .status-text { color: #1565c0; }

</style>

<table class="status-colors-table">
    <thead>
        <tr>
            <th scope="col">System / Service</th>
            <th scope="col">Region</th>
            <th scope="col">Last Check</th>
            <th scope="col">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row-success">
            <td>Main Website (www)</td>
            <td>US-East-1</td>
            <td>2024-08-22 10:30:00 UTC</td>
            <td class="status-text">Online</td>
        </tr>
        <tr class="row-success">
            <td>API Gateway (api)</td>
            <td>US-East-1</td>
            <td>2024-08-22 10:30:01 UTC</td>
            <td class="status-text">Online</td>
        </tr>
        <tr class="row-warning">
            <td>Worker Queue</td>
            <td>US-East-1</td>
            <td>2024-08-22 10:29:55 UTC</td>
            <td class="status-text">High Load</td>
        </tr>
        <tr class="row-danger">
            <td>Authentication Service</td>
            <td>EU-West-1</td>
            <td>2024-08-22 10:28:10 UTC</td>
            <td class="status-text">Service Interruption</td>
        </tr>
        <tr class="row-info">
            <td>Billing System</td>
            <td>US-West-2</td>
            <td>2024-08-22 10:25:00 UTC</td>
            <td class="status-text">Maintenance Mode</td>
        </tr>
    </tbody>
</table>