JSFiddle - React, Tailwind, and code Playground

by Torwan

HTML

<div class="table" id="results">
  <div class='theader'>
    <div class='table_header'>Header One</div>
    <div class='table_header'>Header Two</div>
    <div class='table_header'>Header Three</div>
    <div class='table_header'>Header Four</div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.2726</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.1311</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>-0.4782</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>-0.9919</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-0.89</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.7986</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>0.876</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>0.498</div>
    </div>
  </div>
  <div class='table_row'>
    <div class='table_small'>
      <div class='table_cell'>Header One</div>
      <div class='table_cell'>-1.1669</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Two</div>
      <div class='table_cell'>0.4949</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Three</div>
      <div class='table_cell'>-0.7113</div>
    </div>
    <div class='table_small'>
      <div class='table_cell'>Header Four</div>
      <div class='table_cell'>0.434</div>
    </div>
  </div>
  <div class='table_row'>
    <div...

CSS

.table {
    display: table;
    text-align: center;
    width: 60%;
    margin: 10% auto 0;
    border-collapse: separate;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
  }

  .table_row {
    display: table-row;
  }

  .theader {
    display: table-row;
  }

  .table_header {
    display: table-cell;
    border-bottom: #ccc 1px solid;
    border-top: #ccc 1px solid;
    background: #bdbdbd;
    color: #e5e5e5;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 700;
  }

  .table_header:first-child {
    border-left: #ccc 1px solid;
    border-top-left-radius: 5px;
  }

  .table_header:last-child {
    border-right: #ccc 1px solid;
    border-top-right-radius: 5px;
  }

  .table_small {
    display: table-cell;
  }

  .table_row>.table_small>.table_cell:nth-child(odd) {
    display: none;
    background: #bdbdbd;
    color: #e5e5e5;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .table_row>.table_small>.table_cell {
    padding-top: 3px;
    padding-bottom: 3px;
    color: #5b5b5b;
    border-bottom: #ccc 1px solid;
  }

  .table_row>.table_small:first-child>.table_cell {
    border-left: #ccc 1px solid;
  }

  .table_row>.table_small:last-child>.table_cell {
    border-right: #ccc 1px solid;
  }

  .table_row:last-child>.table_small:last-child>.table_cell:last-child {
    border-bottom-right-radius: 5px;
  }

  .table_row:last-child>.table_small:first-child>.table_cell:last-child {
    border-bottom-left-radius: 5px;
  }

  .table_row:nth-child(2n+3) {
    background: #e9e9e9;
  }

  @media screen and (max-width: 900px) {
    .table {
      width: 90%
    }
  }

  @media screen and (max-width: 650px) {
    .table {
      display: block;
    }
    .table_row:nth-child(2n+3) {
      background: none;
    }
    .theader {
      display: none;
    }
    .table_row>.table_small>.table_cell:nth-child(odd) {
      display: table-cell;
      width: 50%;
    }
    .table_cell {
      display: table-cell;
      width: 50%;
    }
   ...