JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://rawgithub.com/twbs/bootstrap/master/dist/css/bootstrap.min.css">
<div class="panel panel-primary">
  <div class="panel-heading text-center">
    table in Panel
  </div>
  <table class="table table-bordered">
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>bar</td>
    </tr>
  </table>
  <div class="panel-footer text-center">
    Panel footer
  </div>
</div>

<!-- No header/footer -->
<div class="panel panel-primary">
  <table class="table table-bordered">
    <tr>
      <th>#</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>foo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>bar</td>
    </tr>
  </table>
</div>

<div class="panel panel-primary">
  <div class="panel-heading text-center">
    list-group in Panel
  </div>
  <ul class="list-group">
    <li class="list-group-item">
      <span class="badge">14</span>
      Cras justo odio
    </li>
    <li class="list-group-item">
      <span class="badge">14</span>
      Cras justo odio
    </li>
  </ul>
  <div class="panel-footer text-center">
    Panel footer
  </div>
</div>

<!-- No header/footer -->
<div class="panel panel-primary">
  <ul class="list-group">
    <li class="list-group-item">
      <span class="badge">14</span>
      Cras justo odio
    </li>
    <li class="list-group-item">
      <span class="badge">14</span>
      Cras justo odio
    </li>
  </ul>
</div>

CSS

.panel {
  margin: 50px;
  color: #fff;
  background-color: #777;
}

.table th {
  color: #000;
  background-color: #aaa;
}
.table td {
  color: #000;
  background-color: #eee;
}

.panel-footer, .list-group {
  color: #000;
}