JSFiddle - React, Tailwind, and code Playground

HTML

<div id="clients">
    <div class="col-md-2 our-clients-item">
      <a href="#">
          <img class="our-clients-image" src="" alt="client.png">
      </a>
    </div>
    <div class="col-md-2 our-clients-item">
      <a href="#">
          <img class="our-clients-image" src="" alt="client.png">
      </a>
    </div>
    <div class="col-md-2 our-clients-item">
      <a href="#">
          <img class="our-clients-image" src="" alt="client.png">
      </a>
    </div>
</div>

CSS

#cliesnts{
    line-height: 150px;
  min-width: 0;
  margin: 0 auto;
  float: none;
}
.our-clients-item {
  float: left;
  margin-left: 15px;
  margin-right: 15px;
}

.our-clients-image {
  opacity: 0.3;
  overflow: hidden;
  float: none;
}
.our-clients-image:hover {
  opacity: 1;
}