JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test</title>
    </head>
    <body>
        <ul>
            <li><a href="#TabStrip-1">Text 1</a></li>
            <li><a href="#TabStrip-2">Text 2</a></li>
            <li><a href="#TabStrip-3">Very long text...</a></li>
        </ul>
    </body>
</html>

CSS

ul
{
    float: left;
    width: 25px;           
    list-style: none;   
    padding: 0;
    margin: 0;     
}

li
{
    display: inline-block;
    border: 1px solid #A7BAC5;
    webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg);     
    -o-transform:rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);                 
}

a
{
    text-decoration: none;
    white-space: nowrap;
    color: #000000;
    padding: 3px 10px;          
}