JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="row">
    <div class="child">
      <img src="kot1.jpg" alt="Kot 1">
      <p>Lorem ipsum dolor</p>
    </div>
    <div class="child">
      <img src="kot2.jpg" alt="Kot 2">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="child">
      <img src="kot3.jpg" alt="Kot 3">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="child">
      <img src="kot4.jpg" alt="Kot 4">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
  <div class="row">
    <div class="child">
      <img src="kot5.jpg" alt="Kot 5">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="child">
      <img src="kot6.jpg" alt="Kot 6">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="child">
      <img src="kot7.jpg" alt="Kot 7">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="child">
      <img src="kot8.jpg" alt="Kot 8">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  width: 440px;
}

.row {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  width: 100%;
  gap: 10px;
}

.child {
  width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.child img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  background: green;
}

.child p {
  margin: 0;
  text-align: left;
  background-color: yellow;
}

.child p:hover {
  background-color: red;
}