JSFiddle - React, Tailwind, and code Playground

by yudizsolutions

HTML

<body>
  <div class="gallery-list">
    <div class="gallery">
      <a target="_blank" href="Icon_pyro.jpg">
        <img src="https://via.placeholder.com/256x256" 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="https://via.placeholder.com/256x256" 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="https://via.placeholder.com/256x256" 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="https://via.placeholder.com/256x256" alt="Soldier" width="256" height="256">
      </a>
      <div class="desc">Soldier</div>
    </div>
  </div>
</body>

CSS

.gallery-list {
  min-height: 100vh;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  text-align: center;
}

.gallery img {
  margin: 5px;
  border: 4px solid #000;
}