JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<body>
<div class="container">
<img src="http://kenwatanabe.info/library/test_img_01.jpg"/>
<span class="rotate">Hello THERE!</span>
</div>


</body>

CSS

.rotate {

    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;

    position: absolute;
    top: 0;
    left: 0;
    display:block;
    white-space: nowrap;    
    font-size: 20px;
    z-index:1000;
    color:red;
}

.container {height:100vh; width:auto; position:relative; text-align:center}

img {height:100%; width:auto; opacity:0.6}

body {height:500px!important;}