JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="gallery-wrapper">
  <div class="gallery">
    <a target="_blank" href="Icon_pyro.jpg">
      <img src="Icon_pyro.jpg" alt="Pyro" width="256" height="256">
    </a>
    <div class="desc">Pyro</div>
  </div>
          
  <div class="gallery">
    <a target="_blank" href="Icon_scout.jpg">
      <img src="Icon_scout.jpg" alt="Scout" width="256" height="256">
    </a>
    <div class="desc">Scout</div>
  </div>
          
  <div class="gallery">
    <a target="_blank" href="Icon_spy.jpg">
      <img src="Icon_spy.jpg" alt="Spy" width="256" height="256">
    </a>
    <div class="desc">Spy</div>
  </div>
          
  <div class="gallery">
    <a target="_blank" href="Icon_soldier.jpg">
      <img src="Icon_soldier.jpg" alt="Soldier" width="256" height="256">
    </a>
    <div class="desc">Soldier</div>
  </div>
</div>
</body>

CSS

.gallery-wrapper {
  display: flex;
  justify-content: center;
}