JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<main>
  <aside class="a1"></aside>
  <aside class="a2"></aside>
  <aside  class="a3"></aside>
  <aside class="a4"></aside>
  <aside class="a5"></aside>
</main>

CSS

* {
  box-sizing: border-box;
}
main{
  height:60vw;
  width:60vw;
  position: relative;
  border: 1px solid black;
}
aside{
  position:absolute;

  background:red;
 border:1px solid black;
}
.a1{
  height:66.666%;
width:33.333%;
  top:0;
  left:0;
}

.a2{
  top:0;
  left:33.333%;
width:66.666%;
height:33.333%;
}

.a3{
    top:33.333%;
  left:66.666%;
width:33.333%;
height:66.666%;
  
}

.a4{
    top:66.666%;
  left:0;
width:66.666%;
height:33.333%;
}
.a5{
    top:33.333%;
  left:33.333%;
width:33.333%;
height:33.333%;
  
}