JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test1">
 <div class="flexparent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
 </div>
</div>
<div class="test2">
 <div class="flexparent">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
 </div>
 <div class="flexparent nr2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
 </div>
</div>

CSS

/*  using flex-grow  */
.test1 .flexparent div:nth-child(1),
.test1 .flexparent div:nth-child(2) {
  flex-grow: 1;
  background: #aaf;
}
.test1 .flexparent div:nth-child(n+3) {
  flex-grow: 2;
}

/*  using flex-basis  */
.test2 .flexparent div {
  flex-basis: 100%;
}
.test2 .flexparent div:nth-child(-n+2) {
  background: #0a0;
  flex-basis: 50%;
}

/* general styles */
.flexparent {
  display: flex;
}
.flexparent.nr2, .test2 {
  margin-top: 4px;
}
.flexparent div {
  min-width: 0;                     /*  allow a flex item to shrink below its content  */
  margin: 0 2px;
  text-align: center;
  background: lightblue;
}
.test2 .flexparent div {
  background: lightgreen;
}
.flexparent div {
  padding: 2px 0;
}
.flexparent div:empty {
  padding: 10px 0;
}