JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid grid--preset-pente">
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
  <div class="grid__item"></div>
</div>

CSS

* { box-sizing: border-box }

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid__item {
  height: 100px;
  background-color: cyan;
  border: 1px solid #000;
  flex-basis: 50%;
}

.grid--preset-pente .grid__item:nth-child(5n + 3),
.grid--preset-pente .grid__item:nth-child(5n + 4),
.grid--preset-pente .grid__item:nth-child(5n + 5) {
  flex-basis: 33.333333%;
}