JSFiddle - React, Tailwind, and code Playground

by chad

HTML

<table
      class="atable"
      cellspacing="0"
      cellpadding="0"
      style="font-size: 10pt"
    >
      <thead>
        <tr>
          <th><div class="top r1 c1">Header0</div></th>
          <th><div class="top r1 c2">Header1</div></th>
          <th><div class="top r1 c3">Header2</div></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th><div class="side r2 c1">Header1</div></th>
          <td
            style="
              vertical-align: bottom
            "
          >
            <div class="main r2 c2">
            <span style="
              font-size:6pt;
              background-color: red;
            ">A</span>
            </div>
          </td>
          <td>
            <div class="main r2 c3">
            <span style="
              font-size:6pt;
              background-color: blue;
            ">B</span>
            </div>
          </td>
        </tr>
        <tr>
          <th><div class="side r3 c1">Header2</div></th>
          <td>
            <div class="main r3 c2">
            <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">C</span>
            </div>
          </td>
          <td>
            <div class="main r3 c3">
            <span style="
              font-size:30pt;
              background-color: green;
            ">D</span>
            </div>
          </td>
        </tr>
        <tr>
          <th><div class="side r4 c1">Header2</div></th>
          <td>
            <div class="main r4 c2">
            <span style="
              font-size:30pt;
              background-color: yellow;
              right: 0px
            ">E</span>
            </div>
          </td>
          <td>
            <div class="main r4 c3">
            <span style="
              font-size:6pt;
              background-color: blue;
            ">F</span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

CSS

table {
        border-width: 1px;
        border-style: none none solid solid;
      }

      th, td {
        border-width: 1px;
        border-style: solid solid none none;
        overflow: hidden;
      }

      .top, .side, .main {
        position: relative;
        width: 50px;
        height: 18px;
      }

      td span {
        position: absolute;
        top:0px;
      }

      .c3 {
        width:25px;
      }

      .r4 {
        height:10px
      }