JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Cover -->
<div class="SetOfPagesSeparator"></div>
<table class="SetOfPages">
  <thead><tr><td  class="SetOfPagesHeader">      
    <!-- Set of pages header -->  

  </td></tr></thead>
  <tbody><tr><td  class="SetOfPagesContent">
    <!-- Set of pages content -->  
    <table style="width:210mm;height:297mm;border: solid 1px red;">
      <tr><td style="text-align:center">Cover page</td></tr>
    </table>
    
    
  </td></tr></tbody>
  <tfoot><tr><td  class="SetOfPagesFooter">
    <!-- Set of pages content -->

  </td></tr></tfoot>
</table>
    
<!-- Table of content -->
<div class="SetOfPagesSeparator"></div>
<table class="SetOfPages">
  <thead><tr><td  class="SetOfPagesHeader">      
    <!-- Set of pages header -->  

  </td></tr></thead>
  <tbody><tr><td  class="SetOfPagesContent">
    <!-- Set of pages content -->  
    <table style="width:210mm;height:297mm">
      <tr><td style="text-align:center">Table of contents</td></tr>
    </table>
    
    
  </td></tr></tbody>
  <tfoot><tr><td  class="SetOfPagesFooter">
    <!-- Set of pages content -->

  </td></tr></tfoot>
</table>


<!-- Content -->
<div class="SetOfPagesSeparator"></div>
<table class="SetOfPages">
  <thead><tr><td  class="SetOfPagesHeader">
  <!--<div>   style="margin: 0mm 10mm">-->
  
  
    <table style="border-spacing: 0;width:100%">
      <tr style="height:5mm"><td></td>
      </tr>
      <tr>
      <td style="width:10mm"></td>
      <td style="text-align:left;font-family:Arial;font-size:8pt;border-bottom: solid 1.5px;">Automatic report</td>
      <td style="text-align:right;font-family:Arial;font-size:8pt;border-bottom: solid 1.5px;">Generated January 1<sup>st</sup>, 1515</td>
      <td style="width:10mm"></td>
      </tr>
    </table>        
            
  <!--</div>-->
  </td></tr></thead>
  <tbody><tr><td class="SetOfPagesContent">
  
    <div style="padding: 0mm 10mm">
  
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, erat non malesuada eleifend,...

CSS

@page
{
  size: 210mm 297mm portrait;
}  

/* Body size (on screen and for pushing to the printer) */
html
{
  background: rgb(204,204,204); /* gray client window for screen (so as to emphase the body as looking as A4 paper) */
}
body 
{
  width: 210mm;
  padding:0;
           
  margin: 1.5mm auto; /* Left, right are auto for body to appear as centered on screen */
                      /* We keep a top/bottom margin of 1.5mm even on printer because rendering size is smaller than 210x297mm !! Can't figure out why for now ... */
}

/* Container for pages allowing for repeating header and footer on printed pages */        
table.SetOfPages
{
  /* Computing size from border and collapsing cell borders with table borders */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-collapse: collapse;
                  
  background: white;
  page-break-after: always; /* Add page-break after set of pages when printing */  
  box-shadow: 0 0 0.5cm rgba(0,0,1,0.5); /* Emphases page when displayed on screen */        
}
th.SetOfPagesHeader, td.SetOfPagesHeader, td.SetOfPagesContent, td.SetOfPagesFooter  
{
  padding: 0; /* No padding for header, content, footer */
}      
@media print
{
  /* Adds a empty block after pages content with large bottom margin, so that footer will really appear at end of pages when printed */
  /* Firefox is smart enough to shrink empty table space, so it won't print extra blank pages */
  td.SetOfPagesContent:after 
  {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest printed paper size */
  }
  
  /* Remove extra shadow when printing because rendering size is smaller than 210x297mm !! Can't figure out why for now ... */
  table.SetOfPages
  {
    box-shadow: none;
  }
}
table.SetOfPages div.SetOfPagesHeaderSepator
{    
  height:5mm;      
}

/* Make on screen set of pages appear like separated from one another */
div.SetOfPagesSeparator
{
 ...