JSFiddle - React, Tailwind, and code Playground

HTML

<span class="wrap">
  <div></div>
  <div></div>
  <div class="big"></div>
  <div></div>
  <div></div>

  <div class="big"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div class="big"></div>
  <div></div>
  <div></div>

  <div class="big"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div class="big"></div>
  <div></div>
  <div></div>

  <div class="big"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
</span>

CSS

span { display: flex; }
div { background: black; width: 25%; padding-bottom: 25%; border: 5px solid #fff; }
.big { width: 50%; padding-bottom: 50%; }