JSFiddle - React, Tailwind, and code Playground

by koldev

HTML

<div id="container">
  <div id="frame">
    <h1>Frame Title</h1>
    <div id="content">
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!---->
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
              <td>Notes</td>
              <td>Lorem ipsum dolor sit amet</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="card last-card">
        <table>
          <tbody>
            <tr>
              <td>Name</td>
              <td>John Doe</td>
            </tr>
            <tr>
              <td>Age</td>
              <td>32</td>
            </tr>
            <tr>
      ...

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
}

html,
body {
  height: 100%;
  min-height: 500px;
}

div#container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  min-height: 500px;
  background: coral;
}

div#frame {
  padding: 15px;
  background: lightgreen;
}

h1 {
  margin-bottom: 10px;
  font-size: 20px;
}

div#content {
  max-height: 300px;
  overflow-y: auto;
  background: lightblue;
}

div.card {
  display: table;
  padding: 10px;
  background: lightyellow;
  font-size: 15px;
}

div.card:not(.last-card) {
  margin-bottom: 5px;  
}

table {
  border-collapse: collapse;
}

td {
  padding: 5px;
  background: lightpink;
  white-space: nowrap;
}