Status Pills

<div class="nuda-tbl-status">
  <table class="nuda-tbl-status__table">
    <thead>
      <tr>
        <th class="nuda-tbl-status__th">Deploy</th>
        <th class="nuda-tbl-status__th">Env</th>
        <th class="nuda-tbl-status__th">State</th>
      </tr>
    </thead>
    <tbody>
      <tr class="nuda-tbl-status__row">
        <td class="nuda-tbl-status__td">v2.4.1</td>
        <td class="nuda-tbl-status__td">Production</td>
        <td class="nuda-tbl-status__td">
          <span class="nuda-tbl-status__pill nuda-tbl-status__pill--success">Live</span>
        </td>
      </tr>
      <tr class="nuda-tbl-status__row">
        <td class="nuda-tbl-status__td">v2.5.0-rc</td>
        <td class="nuda-tbl-status__td">Staging</td>
        <td class="nuda-tbl-status__td">
          <span class="nuda-tbl-status__pill nuda-tbl-status__pill--warn">Pending</span>
        </td>
      </tr>
      <tr class="nuda-tbl-status__row">
        <td class="nuda-tbl-status__td">v2.3.9</td>
        <td class="nuda-tbl-status__td">Dev</td>
        <td class="nuda-tbl-status__td">
          <span class="nuda-tbl-status__pill nuda-tbl-status__pill--error">Failed</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

.nuda-tbl-status {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  background: #141414;
}

.nuda-tbl-status__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
}

.nuda-tbl-status__th {
  padding: .5rem .75rem;
  text-align: left;
  color: #777;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #1a1a1a;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.nuda-tbl-status__td {
  padding: .45rem .75rem;
  color: #cfcfcf;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.nuda-tbl-status__row:last-child .nuda-tbl-status__td {
  border-bottom: none;
}

.nuda-tbl-status__pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
}

.nuda-tbl-status__pill--success {
  background: rgba(74,222,128,.15);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,.25);
}

.nuda-tbl-status__pill--warn {
  background: rgba(251,191,36,.15);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.25);
}

.nuda-tbl-status__pill--error {
  background: rgba(255,107,107,.15);
  color: #ff6b6b;
  border: 1px solid rgba(255,107,107,.25);
}