JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table" border="5" cellpadding="1" cellspacing="1">
<tbody>
  
  <tr id="hp">
   <th class="name">
        First and last name
    
    </th> 
    <th class="header" colspan="2">Small</th> 
    <th class="header" colspan="2">Largerrr</th> 
    <th class="header" colspan="2">Two words</th> 
    <th class="header" colspan="2">Two wordsssssssssss<th> 
    <th class="header" colspan="2">even moreee woooorrrdss <th> 
    <th class="header" colspan="2">shawaw</th> 
 
    
</tr>

<tr id="p">
    <th id="names" rowspan="2">
        Name <br>
        Lastname   </th>
             <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
         
        </tr>
  
<tr id="polugodje">         
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                  <td class="o">          </td>
         <td class="z"></td>
                 <td class="o">          </td>
         <td class="z"></td>
         
         </tr>

</tbody></table>

CSS

.header {
  
     
    -webkit-transform: rotate(270deg);	
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(27deg);
    transform: rotate(270deg); 
    white-space: pre-line; 
    width: 50px;
    height: 180px; /* to be adjusted: column is not always tall enough for text */
    margin: 0 -80px;
    vertical-align: middle;
    
    
}