JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table class="table">
  <thead>
    <tr class="text-center">
      <th scope="col" class="blank"></th>
      <th scope="col">Atmosphere</th>
      <th scope="col">Hekate IPL</th>
      <th scope="col">SX OS</th>
      <th scope="col">SX PRO</th>
      <th class="text-left" scope="col">Descripción</th>
    </tr>
  </thead>
  <tfoot>
    <tr class="text-center">
      <th scope="col" class="blank"></th>
      <th scope="col">Atmosphere</th>
      <th scope="col">Hekate IPL</th>
      <th scope="col">SX OS</th>
      <th scope="col">SX PRO</th>
      <th class="text-left" scope="col">Descripción</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td class="text-center separator" colspan="6">Compatibilidad del hardware</td>
    </tr>
    <tr>
      <th scope="row">Nintendo Switch</th>
      <td class="text-center"><span class="text-success">Sí</span></td>
      <td class="text-center"><span class="text-success">Sí</span></td>
      <td class="text-center"><span class="text-danger">No</span></td>
      <td class="text-center"><span class="text-danger">No</span></td>
      <td>Compatible con Nintendo Switch Pre-Mariko</td>
    </tr>
    <tr>
      <th scope="row">Nintendo Switch (Mariko)</th>
      <td class="text-center"><span class="text-danger">No</span></td>
      <td class="text-center"><span class="text-danger">No</span></td>
      <td class="text-center"><span class="text-success">Sí</span></td>
      <td class="text-center"><span class="text-success">Sí</span></td>
      <td>Compatible con Nintendo Switch Mariko</td>
    </tr>
    <tr>
      <td class="text-center separator" colspan="6">Compatibilidad...

SCSS

$color-green: #eaf5ea;
$color-green-dark: #395a2f;
$color-gray: #f2f2f2;
$color-orange: #ff7f00;
body {
  background-color: $color-green;
  .table {
    thead,
    tfoot {
      background-color: $color-green;
    }
    thead {
      th {
        border-top: none;
        border-bottom-color: $color-orange;
      }
    }
    tfoot {
      th {
        border-top-color: $color-orange;
        border-top-width: 2px;
      }
    }
    tbody {
      tr {
        th {
          //background-color: $color-gray;
        }
        td {
          &.separator {
            background-color: $color-gray;
          }
        }
      }
    }
  }
}