JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs-vertcal">
	<ul class="tabs clearfix">
		<li class="tab">Tab 3</li>
		<li class="tab">Tab 2</li>
		<li class="tab">Tab 1</li>
	</ul>
</div>

CSS

.tabs-vertcal{	
	transform-origin: 0% 0% 0px; 
	transform: matrix(0, -1, 1, 0, 0, 350); 
	display: block;
}
.tabs{	
	list-style-type: none;
}
.tab{
	float: left; 
	width: 92px; 
	padding: 6px; 
	border: 1px solid pink; 
	background: indigo; 
	color: white;
	text-align: right;
}

/*  */
.clearfix:before, .clearfix:after{ content: ""; display: table; }
.clearfix:after{ clear: both; }