JSFiddle - React, Tailwind, and code Playground
HTML
<div id="slideClick">
<div>
<span class="sideMsg">MESSAGES</span>
</div>
</div>
CSS
.sideMsg
{
color:#333;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
white-space:nowrap;
display:inline-block;
bottom:0;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
font-size:14px;
font-weight:normal;
text-shadow: 0px 0px 1px #333;
border: 1px solid red;
}
#slideClick {
float:left;
height:190px;
width:200px;
background:#EE8D40;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}