JSFiddle - React, Tailwind, and code Playground

HTML

<div class="column">
<div class="column1">
<div class="text-vertical"><a title="Le studio" href="http://localhost/studiocg/?page_id=37">le studio</a></div>
</div>
<div class="column2">
<div class="text-vertical"><a title="Design global" href="http://localhost/studiocg/?page_id=12">design global</a></div>
</div>
<div class="column3">
<div class="text-vertical"><a title="Références" href="http://localhost/studiocg/?page_id=41">références</a></div>
</div>
</div>

CSS

.column {
	width:100%;
	display:inline-flex;
	height:500px;
    position:relative;
}
.text-vertical {
	color:#ff5715;
	font-size:2em;
	text-align:right;
	position:relative;
	background:yellow;
    
    /*FIRST you have to position it from the top right*/
    position:absolute;
	top:0;
    right:0;
    /*Give hime a fixed height and width*/
    height:40px;
    width: 200px;
    /*Defin the rotation origin to top right (like the absolute position)*/    
    transform-origin: calc(100% - 20px) 20px 0;
    /*rotate it*/
	transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); /* Internet Explorer */
    -moz-transform:rotate(-90deg); /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari et Chrome */
    -o-transform:rotate(-90deg); /* Opera */

}
.column1 {
	width:16%;
	border: 1px solid #adadad;
	margin-right:15px;
	box-shadow: 1px 1px 5px #adadad;
    position:relative;
}
.column2 {
	width:20%;
	border: 1px solid #adadad;
	margin-right:15px;
	box-shadow: 1px 1px 5px #adadad;
    position:relative;
}
.column3 {
	width:19%;
	border: 1px solid #adadad;
	margin-right:15px;
	box-shadow: 1px 1px 5px #adadad;
    position:relative;
}