JSFiddle - React, Tailwind, and code Playground

by BandonRandon

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
{
  list-style: none;   
  padding: 0;
  margin-left: 40px;     
}

li
{

  display: block;
 margin-left: -85px;
  margin-top: 120px;
  width: 120px;
    
  border: 1px solid #A7BAC5;
  -webkit-transform: rotate(90deg); 
  -moz-transform: rotate(90deg);     
  -o-transform:rotate(90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
text-align:center;    
}

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