JSFiddle - React, Tailwind, and code Playground

by wildragon

HTML

<div id='page'>

  <table id='exampleTable'>
    <tr>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
      <td>foobar</td>
    </tr>
  </table>

</div>

CSS

#page {
  width: 60%;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f2f2f2;
  box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  font-size: 12px;
}

#exampleTable {
  max-width: 95%;
}

#exampleTable td {
  display: inline-block;
  background-color: white;
  width: 60px;
  margin: 5px;
  padding: 0.3%;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
}