JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="object"><div class="content">one</div></div>
<div class="object"><div class="content">two</div></div>
<div class="object"><div class="content">three</div></div>
<div class="object"><div class="content">four</div></div>
<div class="object tall"><div class="content">five</div></div>
<div class="object"><div class="content">six</div></div>
<div class="object"><div class="content">seven</div></div>
<div class="object"><div class="content">eight</div></div>
</div>
CSS
#container { width:300px; height:300px; border:1px solid blue;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}
.object {
float:left;
width:96px;
height:96px;
margin:1px;
border:1px solid red;
position:relative;
}
.tall {
width:196px;
}
.content {
padding:0;
margin:0;
position:absolute;
bottom:0;
left:0;
text-align:left;
border:1px solid green;
-webkit-transform-origin: 0 0;
transform:rotate(-70deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-moz-transform:rotate(-90deg); /* Firefox */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
-o-transform:rotate(-90deg); /* Opera */}