JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent parent1">
    
    <div class="child">
        
        <ul id="inner-new" class="nav nav-tabs">
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li><li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li><li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li><li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
            <li>Test</li>
        </ul>
            
    </div>
    
</div>

CSS

.parent {
    background: green;
    width: 200px;
    padding: 20px;
     height: 245px;
  overflow: hidden;
    display: inline-block;
    transform: rotate(90deg);
    margin-left:20px;
}
.child {
    background: white;
    padding: 10px;
   overflow: auto;
  height: 200px;
}

li {
    padding: 30px;
      transform: rotate(-90deg);
}

#inner {
    background: yellow;
    padding: 10px;
    width: 500px;
}

#inner-new {
    background: yellow;
    padding: 10px;
    width: auto;
}