JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
	<p> Just spacing</p>
</div>
<div class="row">
	<div class="col-md-8">

		<section id="team">
			<div class="container">
				<div class="grid">
			
					<div class="flip-card">
						<div class="flip-card-inner">
							<div class="flip-card-front">
								<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" alt="Avatar"
									style="width:120px;height:120px;" />
							</div>
							<div class="flip-card-back">
								<br />
								<p>WR : 50%</p>
								<p>PR : 50%</p>
							</div>
						</div>
					</div>
          <div class="flip-card">
						<div class="flip-card-inner">
							<div class="flip-card-front">
								<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" alt="Avatar"
									style="width:120px;height:120px;" />
							</div>
							<div class="flip-card-back">
								<br />
								<p>WR : 50%</p>
								<p>PR : 50%</p>
							</div>
						</div>
					</div><div class="flip-card">
						<div class="flip-card-inner">
							<div class="flip-card-front">
								<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" alt="Avatar"
									style="width:120px;height:120px;" />
							</div>
							<div class="flip-card-back">
								<br />
								<p>WR : 50%</p>
								<p>PR : 50%</p>
							</div>
						</div>
					</div>
          <div class="flip-card">
						<div class="flip-card-inner">
							<div class="flip-card-front">
								<img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" alt="Avatar"
									style="width:120px;height:120px;" />
							</div>
							<div class="flip-card-back">
								<br />
								<p>WR : 50%</p>
								<p>PR : 50%</p>
							</div>
						</div>
					</div>
          <div class="flip-card">
						<div class="flip-card-inner">
							<div class="flip-card-front">
								<img...

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  grid-gap: 15px;
}

.flip-card {
  border-style: hidden;
  background-color: transparent;
  width: 120px;
  height: 120px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #222e36ef;
  color: white;
  transform: rotateY(180deg);
}

@media(max-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}