JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Raleway" rel="stylesheet">
    <title>Document</title>
  </head>

  <body>
    <div class="flyin-grid">
      <div class="flyin-grid__item card">
        <img src="https://img.mistj.com/b/202406281558100.jpg" alt="a chicken" />
        <h4>Peggy Schuyler</h4>
        <p>This Lavender Orpington lays light brown eggs.</p>
      </div> 
      
      <div class="flyin-grid__item card">
        <img src="https://img.mistj.com/b/202406281558100.jpg" alt="a chicken" />
        <h4>Peggy Schuyler</h4>
        <p>This Lavender Orpington lays light brown eggs.</p>
      </div>
    </div>

  </body>

</html>

CSS

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  background-color: hsl(200, 80%, 30%);
  background-image: radial-gradient(hsl(200, 80%, 30%), hsl(210, 80%, 20%));
  color: white;
  font-family: Raleway, Helvetica, Arial, sans-serif;
  line-height: 1.4;
  margin: 0;
  min-height: 100vh;
}


.card {
  max-width: 200px;
  display: inline-block;
  /* margin: 0 auto; */
  margin-top: 5em;
  margin-bottom: 1em;
  padding: 0.5em;
  background-color: white;
  color: hsl(210, 15%, 20%);
  box-shadow: 0.2em 0.5em 1em rgba(0, 0, 0, 0.3);
}

.card>img {
  width: 100%;
}


.flyin-grid {
  margin: 0 1rem;
  perspective: 500px;
}

.flyin-grid__item {
  animation: fly-in 600ms ease-in;
  animation-fill-mode: backwards;
}

@keyframes fly-in {
  0% {
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }

  56% {
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }

  100% {
    transform: translateZ(0) rotateY(0);
  }
}


.flyin-grid__item:nth-child(2) {
  animation-delay: 0.15s;
}

.flyin-grid__item:nth-child(3) {
  animation-delay: 0.3s;
}