JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">

  <div class="group1">
    <div class="b1">1</div>
    <div class="b2">2</div>
    <div class="b4">4</div>
    <div class="b5">5</div>
  </div>

  <div class="group2 b3">3</div>

  <div class="group3 b6">6</div>

  <div class="group4">
    <div class="b7">7</div>
    <div class="b8">8</div>
    <div class="b9">9</div>
    <div class="b10">10</div>

  </div>





</div>

CSS

.foo {
  display: flex;
  flex-flow: row wrap;
  color: white;
  font-weight: bold;
}

.foo > div {
  flex: 0 0 50%;
  height: 100px;
  display: flex;
  flex-flow: row wrap;
}

.group1 > div, .group4 > div {
  flex: 0 0 50%;
  height: 50px;
}

.foo .b1  { background: #000;  }
.foo .b2  { background: #555;  }
.foo .b3  { background: green; }
.foo .b4  { background: #666;  }
.foo .b5  { background: #222;  }
.foo .b6  { background: red;   }
.foo .b7  { background: #333;  }
.foo .b8  { background: #888;  }
.foo .b9  { background: #444;  }
.foo .b10 { background: #999;  }

* { box-sizing: border-box; margin: 0; }