JSFiddle - React, Tailwind, and code Playground

by TheDiamondDoge

HTML

<div>
  <table cellspacing="0">
    <tr>
      <td colspan="2"></td>
      <td colspan="2" align="center" style = "background-color: #D4F3B0">Helpful</td>
      <td colspan="2" align="center" style = "background-color: #F2AAAA">Harmful</td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td colspan="2" align="center" style = "background-color: #D4F3B0">To achieving the objectives</td>
      <td colspan="2" align="center" style = "background-color: #F2AAAA">To achieving the objectives</td>
    </tr>
    <tr>
      <td class="rotate" style = "background-color: #FCF6B8">
        <div>
          Internal origin
        </div>
      </td>
      <td class="rotate" style = "background-color: #FCF6B8">
        <div>
          (attributes of the organization)
        </div>
      </td>
      <td class="rotate content_header" style = "background-color: #E2EE88">
        <div style = "color: white; font-size: 25px">
          Strengths
        </div>
      </td>
      <td class="content" id = "weak" style = "background-color: #E2EE88"></td>
      <td class="rotate content_header" style = "background-color: #F4C486">
        <div style = "color: white; font-size: 25px">
          Weaknesses
        </div>
      </td>
      <td class="content" style = "background-color: #F4C486"></td>
    </tr>
    <tr>
      <td class="rotate" style = "background-color: #C7D8EC">
        <div>
          External origin
        </div>
      </td>
      <td class="rotate" style = "background-color: #C7D8EC">
        <div>
          (attributes of the organization)
        </div>
      </td>
      <td class="rotate content_header" style = "background-color: #ADD0BA">
        <div style = "color: white; font-size: 25px">
          Opportunities
        </div>
      </td>
      <td class="content" style = "background-color: #ADD0BA"></td>
      <td class="rotate content_header" style = "background-color: #C0A5B8">
        <div style = "color: white; font-size: 25px">
          Threats
     ...

CSS

.content {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  border-left: none;
}

.content_header {
  border: 1px solid black;
  border-right: none;
}

.rotate {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;
}

.rotate div {
  -moz-transform: rotate(-90.0deg);
  /* FF3.5+ */
  -o-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* IE8 */
  margin-left: -10em;
  margin-right: -10em;
}