JSFiddle - React, Tailwind, and code Playground

by Andres Abadia

HTML

<div class="content-container">
<div class="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>
<div class="container">
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
	<div class="box"></div>
</div>
</div>

CSS

.content-container{
  position:absolute;
  transform: rotate(-90deg);
  margin:0 10px;
}
.container {
  margin:2px;
  background-color: blue;
  width:300px;
  display:flex;
  flex-direction:row-reverse;
  flex-wrap:wrap;
}
.box {
	width: 60px;
	height: 50px;
	background-color: green;
	margin: 2px;
}