JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <figure>
    <img src="http://via.placeholder.com/100x100" alt="">
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/100x100" alt="">
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/100x100" alt="">
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/100x100" alt="">
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/100x100" alt="">
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/100x100" alt="">
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/100x100" alt="">
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/100x100" alt="">
    <figcaption>text</figcaption>
  </figure>
  <figure>
    <img src="http://via.placeholder.com/100x100" alt="">
    <figcaption>text</figcaption>
  </figure>
</main>

CSS

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
figure {
  margin: 0.5% 0 0;
  width: 33%;
  text-align: center;
  background: #999;
}