JSFiddle - React, Tailwind, and code Playground

by Michael Seifert

HTML

<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
</div>

CSS

#container {
     max-height: 350px;
     width: 200px;
     border: 2px solid black;
     display: block;
     position: absolute;
   }
   
   #title {
     height: 100px;
     width: 100%;
     border: 2px solid red;
   }
   
   #tabs {
     height: 100px;
     width: 100%;
     border: 2px solid green;
   }
   
   #content {
     height: 100%;
     width: 100%;
     border: 2px solid blue;
     overflow-y: auto;
   }