JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outercontainer">
    <div class="container">
        <p class="rotated top">float top</p>
        <p class="rotated bottom">float bottom</p>
        <p class="rotated center"><span class="green">center?</span></p>
    </div>
</div>

CSS

.outercontainer {
    margin: 0;
    background-color: blue;
    height:380px;
    box-sizing: border-box;
}
.container {
    margin: 0;
    display:inline-block;
    background-color: tan;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0% 100%;
    height: 220px;
/*    margin-top: -100px; */
    position: relative;
    top: -220px;
    width: 300px;
}
.rotated {
    margin: 0;
    background-color: yellow;
    -webkit-transform: rotate(-90deg);
}
.bottom {
    float: right;
    -webkit-transform-origin: 100% 0%;
    margin-right: 3em;
    height:3em;
/*  position:absolute;
    right:3em; */
}
.top {
    float: left;
    -webkit-transform-origin: 100% 0%;
    height:3em;
    margin-left:-70px;
    width:70px;
/*  position:absolute;
    right:3em; */
}
.center {
    background-color:red;
    text-align: center;
    display: block;
    width:;
    margin-left:0px;
    margin-top:0px;
}
.green {
    background-color:green;
}
}