JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<div class="table-main sideborder-none">
  <table>

    <tbody>
      <tr>

        <th class="wedge" rowspan="36">
          <div class="wedge-name-container">
            <h3 class="rotate">Vision</h3>
          </div>
        </th>


        <th class="slice color-See Possibility" rowspan="17">
          <div class="rotate header">
            <h4><span style="font-weight:var(--font-w-normal);">See</span> Possibility</h4>
          </div>
        </th>

        <th class="pole name color-Reflection" rowspan="4">
          <div class="rotate" style="margin-left:-16px;">Reflection</div>
        </th>
        <th class="pole modifier color-Reflection" rowspan="4">
          <div class="rotate" style="margin-left:-64px">Benefits</div>
        </th>
        <td valign="top" class="statement pole-start">
          I take time to look back on lessons learned
        </td>
        <td valign="top" class="answer pole-start">
          3
        </td>
        <td rowspan="4" class="matrix-container">
          <div class="avg benefits mid matrix-bars">
            <p>4.5</p>
          </div>
        </td>
      </tr>
      <tr>




        <td valign="top" class="statement ">
          I pause to be curious about new possibilities
        </td>
        <td valign="top" class="answer ">
          5
        </td>
      </tr>
      <tr>




        <td valign="top" class="statement ">
          I think things through before I act
        </td>
        <td valign="top" class="answer ">
          6
        </td>
      </tr>
      <tr>




        <td valign="top" class="statement border-bottom">
          New reflection benefits
        </td>
        <td valign="top" class="answer border-bottom">
          2
        </td>
      </tr>
      <tr>


        <th id="header" class="pole name color-Change" rowspan="4">
          <div class="rotate" style="margin-left:-16px;background: #245F81;width: 80px;">Change</div>
        </th>
        <th class="pole modifier color-Change"...

CSS

*{
  margin:0;
  padding:0;
}
:root {
  --border-color: #d5d4d5;
  --rotate: -90deg;
  --counter_rotate: 90deg;
  --font-s-small: 12px;
  --font-s-normal: 14px;
  --font-s-mid: 16px;
  --font-w-normal: 500;
  --font-w-mid: 700;
  --font-w-bold: 900;
}

* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  position: relative;
  font-family: museo-sans, sans-serif;
  font-weight: var(--font-w-normal);
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main.table-main {
  margin: 5 auto;
  padding: 5 30px;
}

table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
  border: none;
  border-collapse: collapse;
}
#header{
  border:0;
}

table tbody tr  {

  font-weight: var(--font-w-normal);
}

.wedge {
  border: 1px solid var(--border-color);
  border-right: none;
  border-right: 1px solid #fff;
}

.wedge .wedge-name-container {
  margin-top: 10.6em;
  width: 6.8em;
}

.wedge h3 {
  font-size: 20px;
  text-transform: uppercase;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: -16px;
  border: 3px solid #fff;
  background: #fff;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

.slice {
  border: 1px solid var(--border-color);
  vertical-align: middle;
}

.slice div {
  font-size: var(--font-s-mid);
  text-transform: uppercase;
  margin-top: -30px;
  height: 168px;
  width: 183px;
}

.slice .header span {
  font-weight: var(--font-s-normal);
}

.slice.modifier {
  border-left: none;
  padding-left: 8px;
}

.slice.modifier div {
  width: 180px;
  margin-left: -81px;
  overflow: hidden;
  white-space: nowrap;
}

.pole {
  border: 1px solid var(--border-color);
  vertical-align: middle;
  width: 5%;
  font-size: var(--font-s-normal);
}

.pole.name {
  border-right: none;
  outline: none;
}

.pole.name div {
  display: block;
  width: 87px;
  font-size: var(--font-s-normal);
  font-weight:...