JSFiddle - React, Tailwind, and code Playground

HTML

<div id='cont' class='flexContainer'>
<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>          
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>

<div class='flexElmContainer'>
        <div class='flexElm'>
        </div>
</div>
</div>

CSS

body {
  height: 100vh;
}
.flexContainer{
 display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content: space-between;
box-shadow: 3px 1px 4px 0px black;
height:50%;
width:90%;
}

.flexElmContainer
{
width:50%;
display:flex;
}

.flexElmContainer:nth-of-type(1n)  > .flexElm{
background-color: #3498DB;
transform:rotate(30deg);
width:50%;
height:50%;
margin:auto;
}

.flexElmContainer:nth-of-type(2n) > .flexElm{
 background-color: #E74C3C;
transform:rotate(30deg);
 width:50%;
height:50%;
margin:auto;
}