JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
    <tr>
        <th class="verticalTableHeader"><p>First</p></th>
        <th class="verticalTableHeader"><p>Secondlongheadear</p>
        </th>
        <th class="verticalTableHeader"><p>Third</p></th>
    </tr>
    <tr>
      <td><input class='checkbox'  type='checkbox'></td>
      <td><input class='checkbox'  type='checkbox'></td>
      <td><input class='checkbox'  type='checkbox'></td>
    </tr>
    <tr>
      <td><input class='checkbox' type='checkbox'></td>
      <td><input class='checkbox'  type='checkbox'></td>
      <td><input class='checkbox'  type='checkbox'></td>
    </tr>
    <tr>
      <td><input class='checkbox' type='checkbox'></td>
      <td><input class='checkbox' type='checkbox'></td>
      <td><input class='checkbox' type='checkbox'></td>
    </tr>
</table>

CSS

.verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    g-origin:50% 50%;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    position:absolute;
    
}
.verticalTableHeader p {
    margin:0 -100% ;
    display:inline-block;
    
}
.verticalTableHeader p:before{
    content:'';
    width:0;
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}
xtable {
    text-align:center;
    table-layout : fixed;
    width:150px
}