JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slideIn">I slid in</div> 
<div class="slideIn2">I'm 2nd</div> 
<div class="slideIn3">I'm 3rd</div>

CSS

div.slideIn, div.slideIn2, div.slideIn3 { 
      position: absolute; 
      top: 200px; 
      width: 100px; 
      height: 100px; 
      border: 1px solid black; 
      animation: slideIn 5s; 
      -moz-animation: slideIn 5s; 
      -webkit-animation: slideIn 5s; 
      display: none;
  } 
  div.slideIn {
      left: 50px; 
      display: inline;
  }
  div.slideIn2 {
      left: 150px;
      animation-delay: 2500ms;
      -moz-animation-delay: 2500ms;
      -webkit-animation-delay: 2500ms;
  }
  div.slideIn3 {
      left: 250px;
      animation-delay: 5s;
      -moz-animation-delay: 5s;
      -webkit-animation-delay: 5s;
  }
  @keyframes slideIn { 
      from { top: -100px; } 
      to { top: 200px; } 
  } 
  @-moz-keyframes slideIn { 
      from { top: -100px; } 
      to { top: 200px; } 
  } 
  @-webkit-keyframes slideIn { 
      from { top: -100px; } 
      to { top: 200px; } 
  }