JSFiddle - React, Tailwind, and code Playground

by JoelBrown

HTML

<html>

<head>
  <meta name="viewport" content="width=device-width, 
                                 initial-scale=1, 
                                 maximum-scale=1">
</head>

<body>
  <main id="work">
    <table class="data-list">
      <thead>
        <tr>
          <th>Day</th>
          <th>Date</th>
          <th>Time</th>
          <th>Event</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Friday</td>
          <td>October 23</td>
          <td>8:00pm</td>
          <td>Event A</td>
        </tr>
        <tr>
          <td>Saturday</td>
          <td>October 24</td>
          <td>10:00am</td>
          <td>Event B</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>

</html>

CSS

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;;
    font-size: 16px;
    font-weight: 400;

    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "work work";
    background-color: #eee;
    color: #111;
    min-height: 100vh;

    header {
        display: contents;
    }
}

main#work {
    grid-area: work;
    background-color: var(--work-bg);
    color: var(--work-fg);
    padding: 0.5em;

    table.data-list {
        display: grid;
        border-collapse: collapse;
        min-width: 100%;
        grid-template-columns: 
          min-content 
          min-content 
          max-content 
          1fr;

        thead {
            display: none;
        }

        tbody,
        tr {
            display: contents;
        }

        row-gap: 0.25em;

        tr td {
            background-color: var(#003366);
            color: var(#ffffff);
        }

        td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0.25em 0.5em;
            font-size: var(--grid-work-row-label-height);
        }

        tr :nth-child(1),
        tr :nth-child(2) {
            grid-column: 1/3;
        }

        tr td:nth-child(3) {
            grid-column: 3/4;
        }

        tr td:nth-child(4) {
            grid-column: 4/5;
        }
    }
}