JSFiddle - React, Tailwind, and code Playground

by wiltomap

HTML

<div>
  <table id="twitch">
    <thead>
      <tr>
        <th>Species</th>
        <th>Date</th>
        <th>Locality</th>
      </tr>
    </thead>
    <tbody>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
      <tr><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
    </tbody>
  </table>
  </div>

CSS

body {
  font-family: Arial;
  font-size: 0.8em;
}

div {
  width: 400px;
  margin: auto;
  background-color: lightblue;
}

table {
  width: 100%;
}

table, th, td {
  border: 1px solid red;
  border-collapse: collapse;
}

thead {
  color: #fff;
  background-color: #00f;
  display: block;
  width: 100%;
}

tbody {
  height: 150px;
  width: 100%;
  display: block;
  overflow-y: scroll;
}