JSFiddle - React, Tailwind, and code Playground

HTML

<table class="page-background">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="4"></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <div class="main-page-block">
    <div class="top-page">
      <div clas="main-logo">
        LOGO PLACE
      </div>
      <ul class="main-menu">
        <li class="main-menu__item"><a href="#">О проекте</a></li>
        <li class="main-menu__item"><a href="#">Программа</a></li>
        <li class="main-menu__item"><a href="#">Турнирная сетка</a></li>
        <li class="main-menu__item"><a href="#">Документы</a></li>
        <li class="main-menu__item"><a href="#">Партнёры</a></li>
        <li class="main-menu__item"><a href="#">Контакты</a></li>
      </ul>    
    </div>
    <div class="main-page-content">
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
     <p>Текст</p>
 ...

CSS

body
    {
      padding: 0;
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
    }
    table.page-background
    {
      width: 100vw;
      height: 100vh;
      border: 1px solid #333;
      border-collapse: collapse;
      table-layout: fixed;
    }
    table.page-background tr td
    {
      border: 1px solid #333;
      position: relative;
      background-color: #f2f2f2;
    }
    table.page-background tr td:before,
    table.page-background tr td:after
    {
      position: absolute;
      padding: 0 3px;
      font-size: 8pt;
      font-family: Arial, Helvetica, sans-serif;
    }
    table.page-background tr td:after
    {
      left: calc(50% - .5em - 1.5px);
    }
    table.page-background tr td:before
    {
      top: calc(50% - .5em - 1.5px);
    }
    table.page-background tr td:first-child:before
    {
      left: 0;
    }
    table.page-background tr td:last-child:before
    {
      right: 0;
    }
    table.page-background tr:first-child td:after
    {
      top: 0;
    }
    table.page-background tr:last-child td:after
    {
      bottom: 0;
    }
    table.page-background tr:first-child td:first-child:before,
    table.page-background tr:first-child td:last-child:before
    {
      content: 'А';
    }
    table.page-background tr:nth-child(2) td:first-child:before,
    table.page-background tr:nth-child(2) td:last-child:before
    {
      content: 'Б';
    }
    table.page-background tr:last-child td:first-child:before,
    table.page-background tr:last-child td:last-child:before
    {
      content: 'В';
    }
    table.page-background tr:first-child td:first-child:after,
    table.page-background tr:last-child td:first-child:after
    {
      content: '1';
    }
    table.page-background tr:first-child td:nth-child(2):after,
    table.page-background tr:last-child td:nth-child(2):after
    {
      content: '2';
    }
    table.page-background tr:first-child td:nth-child(3):after,
    table.page-background tr:last-child...