JSFiddle - React, Tailwind, and code Playground

HTML

<h1><code>writing-mode</code> demo by Annarita Tranfici</h1>

<table>
  <tr>
    <th>Value</th>
    <th>Example</th>
  </tr>
  <tr>
    <td>horizontal-tb</td>
    <td class="horizontal-tb">This is a test</td>
  </tr>
  <tr>
    <td>vertical-lr</td>
    <td class="vertical-lr">This is a test</td>
  </tr>
  <tr>
    <td>vertical-rl</td>
    <td class="vertical-rl">This is a test</td>
  </tr>
  <tr>
    <td>sideways-lr</td>
    <td class="sideways-lr">This is a test</td>
  </tr>
  <tr>
    <td>sideways-rl</td>
    <td class="sideways-rl">This is a test</td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px black solid;
  padding: 0.5em;
}

tr:nth-child(odd) {
  background-color: #DDDDDD;
}

td {
  height: 50px;
  width: 50px;
}

.horizontal-tb {
  writing-mode: horizontal-tb;
}

.vertical-lr {
  writing-mode: vertical-lr;
}

.vertical-rl {
  writing-mode: vertical-rl;
}

.sideways-lr {
  writing-mode: sideways-lr;
}

.sideways-rl {
  writing-mode: sideways-rl;
}