JSFiddle - React, Tailwind, and code Playground

by Casufi

HTML

<script src="https://fonts.googleapis.com/css?family=Open+Sans:400,600"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<div class="wrapper">
    <div class="banner">
        banner text
    </div>
    Some text
</div>

CSS

* {
    font-family: 'Roboto';
}

.wrapper {
    width: 320px;
    height: 640px;
    background-color: lightgray;
    padding: 20px;
    position: relative;
}
.banner{
	position: absolute;
	top:15%;
	right: 0;
	color: #fff;
	font-size: 45px;
	line-height: 1em;
	padding: 0;
	border: 0;
	font-weight: 700;
	text-transform: uppercase;
	transform-origin: 100% 100%;
    transform: rotate(-90deg);

}