JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<table>
    <tr>
        <th><span>Romance Languages</span></th>
        <td><span>Spanish</span></td>
        <td><span>Italian</span></td>
        <td><span>French</span></td>
    </tr>
    <tr>
        <th><span>Germanic Languages</span></th>
        <td><span>Dutch</span></td>
        <td><span>English</span></td>
        <td><span>German</span></td>
    </tr>
     <tr>
        <th><span>Slavic Languages</span></th>
        <td><span>Russian</span></td>
        <td><span>Polish</span></td>
        <td><span>Czech</span></td>
    </tr>
</table>
</div>

CSS

.container {
  float: left;
  -webkit-transform: rotate(90deg) translate(-240px, -260px);
  -moz-transform: rotate(90deg) translate(-200px, -240px);
  -o-transform: rotate(90deg) translate(-200px, -240px);  
    -ms-transform: rotate(90deg) translate(-240px, -260px);
  transform: rotate(90deg) translate(-240px, -260px);
  color: #333;
}

table td, table th {
  border: solid #eee 1px;
  padding: 10px;
}

table tr:hover th:first-child { color:#000; background:#EAEAEA; }
table tr:hover td { color:#000;}

table th {
  font-weight: bold;
}

table th, table td {
  height: 200px;
  width: 20px;
}

table th span, table td span {
    display: block;
    position: absolute;
    -webkit-transform: rotate(-90deg) translate(-100px, 0);
    -webkit-transform-origin: top left;
    -moz-transform: rotate(-90deg) translate(-90px, 0);
    -moz-transform-origin: top left;
    -o-transform: rotate(-90deg) translate(-90px, 0);
    -o-transform-origin: top left;
    -ms-transform: rotate(-90deg) translate(-100px, 0);
    -ms-transform-origin: top left;
    transform: rotate(-90deg) translate(-100px, 0);
    transform-origin: top left;
}