JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div class="box blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box yellow"></div>
</div>

CSS

#main {
    height:35%;
    min-height:50px;
    width:35%;
    min-width:50px;
    /* transform: rotate(45deg);
    /*-ms-transform: rotate(45deg); /* IE 9 */
    /*-webkit-transform: rotate(45deg); /* Safari and Chrome */
}
.box {
    height:100%;
    width:100%;
}
.blue {
    background-color:blue;
}
.green {
    background-color:green;
}
.red {
    background-color:red;
}
.yellow {
    background-color:#ffd54f;
}