JSFiddle - React, Tailwind, and code Playground

HTML

<main>

  <div class="c1"></div>
  <div class="c2"></div>
  <div class="c2"></div>
  <div class="c6"></div>
  <div class="c6"></div>
  <div class="c6"></div>
  <div class="c6"></div>
  <div class="c6"></div>
  <div class="c6"></div>
  <div class="c1"></div>
  <div class="c3"></div>
  <div class="c3"></div>
  <div class="c3"></div>

</main>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

main {
  display: flex;
  flex-wrap: wrap;
}
div {
   border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.c1 {
  width: 100%;
}
.c2 {
  width: 50%;
}
.c3 {
  width: 33.33%;
}
.c6 {
  width: 16.66%;
}