JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Example1 | Simple text</h2>
<div class="rotate">text</div>    

<h2>Example 2 | Table header</h2>
<table class="tblborder">
 <tr>
     <th>
         <div class="rotate">header 131321312323</div>
     </th>
     <th>
         <div class="rotate">header3123213123</div>
     </th>
     <th>
         <div class="rotate">header231231231231</div>
     </th>     
 </tr>
 <tr>
     <td>detail</td>
     <td>detail</td>
     <td>detail</td>
 </tr>
 <tr>
     <td>detail</td>
     <td>detail</td>
     <td>detail</td>
 </tr>
</table>

CSS

.rotate {
    display:inline-block;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);    
}

.tblborder, .tblborder td, .tblborder th{
    border-collapse:collapse;
    border:1px solid #000;
}

.tblborder td, .tblborder th{
    padding:20px 10px;
}