JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="rotate">Some text for rotation</div>
</div>
CSS
.container {
position: relative;
border: 1px solid red;
display: inline-block;
height: 400px;
min-width: 30px;
}
.rotate {
text-align: center;
overflow: hidden;
height: 30px;
line-height: 30px;
width: 400px;
position: absolute;
bottom: -32px;
border: 1px solid blue;
transform: rotate(-90deg);
transform-origin: top left;
}
body {
margin: 100px;
}