JSFiddle - React, Tailwind, and code Playground

HTML

<article>
  <figure>
    <p><img src="#" alt=""></p>
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <p><img src="#" alt=""></p>
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <p><img src="#" alt=""></p>
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <p><img src="#" alt=""></p>
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <p><img src="#" alt=""></p>
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <p><img src="#" alt=""></p>
    <figcaption>text</figcaption>
  </figure>
</article>

CSS

article{
  max-width: 800px;
  display: flex;
  flex-wrap: wrap;
  margin: 50px auto 0;
}
figure{
  width: calc(33.333% - 30px);
  margin: 15px;
  background: aqua;
  height: 200px;
}