JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row show-grid">
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    
   <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
    <div>Item 1</div>
</div>

CSS

.show-grid{

    transform: rotate(-90deg);
    transform-origin:100 0%;
    -ms-transform: rotate(-90deg) /* IE 9 */
    -ms-transform-origin:100%  0%; /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari and Chrome */
    -webkit-transform-origin:100% 0%; /* Safari and Chrome */    
    -moz-transform: rotate(-90deg); /* Firefox */    
    -moz-transform-origin:100% 0%; /* Firefox */
    -o-transform: rotate(-90deg); /* Opera */
    -o-transform-origin:100% 0%; /* Opera */
        
 

    margin-left: -500px;    
    background-color: yellow;
    width: 500px;    
    float: left;
    
}

.show-grid div {
    width: 60px;
    height: 60px;
    background-color: blue;
    margin: 5px;
    float: right;
    
     -ms-transform: rotate(90deg); /* IE 9 */
    -ms-transform-origin:50%  50%; /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -webkit-transform-origin:50% 50%; /* Safari and Chrome */
    -moz-transform: rotate(90deg); /* Firefox */
    -moz-transform-origin:50% 50%; /* Firefox */
    -o-transform: rotate(90deg); /* Opera */
    -o-transform-origin:50% 50%; /* Opera */

}