JSFiddle - React, Tailwind, and code Playground

by tikosar

HTML

<p>
Some paragraph text
</p>
<div class="table-wrap">
<table>
<tr>
  <th>ID
  <th>Name
  <th>Birthday
  <th>Country
<tr>
  <td>1
  <td>Alexander
  <td>06‑20‑2020
  <td>Laos
<tr>
  <td>2
  <td>Santiago
  <td>10‑20‑2020
  <td>Mozambique
<tr>
  <td>3
  <td>The Universe Through A Child S Eyes
  <td>06‑20‑2020
  <td>People's Democratic Republic of Yemen
<tr>
  <td>4
  <td>Pictures In The Sky
  <td>10‑20‑2020
  <td>Saint Vincent and the Grenadines
<tr>
  <td>5
  <td>The Universe Through A Child S Eyes
  <td>06‑20‑2020
  <td>Austria
</table>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla ullam minima magni sit dolor temporibus nisi, dolores, eius distinctio, quasi asperiores soluta earum quidem excepturi ex rerum nostrum aspernatur minus.</p>
<p>Atque saepe ipsa, beatae deleniti iusto, sint neque quas, iure, impedit quos dolor corporis magnam quaerat consectetur placeat perferendis eum deserunt ad dicta necessitatibus accusantium. Consequuntur repellat sit eos labore.</p>
<p>Amet molestias quibusdam suscipit non libero dignissimos similique illum itaque, incidunt corporis maiores voluptatibus quis cupiditate magnam voluptatum cum modi quo sequi praesentium, voluptas possimus quaerat, dolorem voluptate natus. Iure.</p>
<p>Quibusdam tempore ratione laudantium, animi nesciunt sit sed maxime saepe ex laborum totam iste quae quisquam, accusamus voluptate est, facilis adipisci alias optio quia atque labore hic ad eaque? Eligendi!</p>
<p>Iste architecto accusantium optio obcaecati, incidunt nesciunt, enim doloribus et, aliquid facilis assumenda consequatur quos. Nemo perspiciatis fugit perferendis dolore, ipsum ducimus sunt excepturi numquam unde nobis quis, id neque!</p>

CSS

.table-wrap {
  overflow: auto;
}

th,
td {
  padding: 2em;
  border: solid 1px gray;
}