JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
<main>
scroll the view and wait 30 seconds. Why the "sticky" is not visible? What does it trigger? 
<section>
<table>
   <tbody>
      <tr class="header"><th>sticky</th></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
      <tr><td>test</td></tr>
   </tbody>   
   </table>
   </section>
   </main>
   </body>
   </html>

CSS

table
{
  background:#ffff00;
}
tbody
{
  display:inline-table;
  margin: 2rem 2rem -2rem -2rem;
  border-spacing: 2rem;
  vertical-align: bottom;
}
.header
{
  position:sticky; 
  top:0;
  bottom:0;
  color:#ffffff;
  background:#ff0000;
}
body
{
  font-size:1600%;
  display:table;
  width:100%;
  height:100%;
  overflow:visible;
  box-sizing:border-box;
  border-top:40rem solid transparent;
  border-spacing:0;
  table-layout:fixed;
}
main
{
  display:table-cell;
  vertical-align:middle;
  height:100%;
  width:100%;
}
html
{
  font-size:1px;
  overflow:visible;
  height:100%;
  display:block;
}
section
{

      display:block;
      background:#ccc9ff;
      position:relative;
      color:#3366ff;
      box-sizing:border-box;
      overflow:visible;
      padding:59rem 18rem 15rem;
      border-bottom: 3rem solid #6666ff;
      text-align:justify;
      margin:20rem;
      min-width:300rem;
   
}