JSFiddle - React, Tailwind, and code Playground

HTML

<div class="smallimgboxcontainer">
  <div class="smallimgbox">
    <a href="">
      <h3>Link #1</h3>
      <img src="https://www.w3schools.com/css/paris.jpg">
    </a>
  </div>

  <div class="smallimgbox">
    <a href="">
      <h3>Link #2</h3>
      <img src="https://www.w3schools.com/css/paris.jpg">
    </a>
  </div>

  <div class="smallimgbox">
    <a href="">
      <h3>Link #3</h3>
      <img src="https://www.w3schools.com/css/paris.jpg">
    </a>
  </div>
</div>

CSS

.smallimgbox {
  float: left;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
  text-align: center;
}

.smallimgboxcontainer {
  overflow: auto;
  margin-right: auto;
  margin-left: auto;
  padding-right: auto;
  padding-left: auto;
}

.smallimgbox img {
  width: 50%;
  height: 50%;
  display: block;
  margin: 0 auto;
}