JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div id="main">Main Content Div
    <div id="verticaldiv">Side Tab</div>
</div>

CSS

#main {
    position: fixed;
    top: 50%;
    margin-top: -250px;
    left:0;
    height: 500px;
    width: 450px;
    background-color:red;
}
#verticaldiv {
    overflow:hidden;
    position: absolute;
    left:100%;
    bottom:100%;
    height:40px;
    width:200px;
    background-color:blue;
    text-align:center;
    color:white;

    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);    
    transform: rotate(90deg);
    
    -ms-transform-origin:0 100%;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
}