JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images">
  <div class="img1">
    <span>Samsung</span><br>
    <img src="https://via.placeholder.com/150">
  </div>
  <div class="img2">
    <span>Samsung</span><br>
    <img src="https://via.placeholder.com/150">
  </div>
  <div class="img3">
    <span>Samsung</span><br>
    <img src="https://via.placeholder.com/150">
  </div>
  <div class="img4">
    <span>Samsung</span><br>
    <img src="https://via.placeholder.com/150">
  </div>
</div>

CSS

.images 
{
  display: flex;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  vertical-align: middle;
}

.images img
{
  border: solid grey;
  width: 22%;
  margin-left: 2%;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 10px;
  transition: all 0.3s ease-out;
  z-index: 2;
}

.images img:hover
{
  border: solid red;
  border-radius: 13px;
  transform: scale(1.1);
  z-index: 9;
  box-shadow: 7px 7px 2px 1px rgba(0, 0, 255, .2);
}