JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box" style="left:0%; animation-delay:0.2s;"></div>
<div class="box" style="left: 25%; animation-delay:0.3s;"></div>
<div class="box" style="left: 50%; animation-delay:0.2s;"></div>
<div class="box" style="left: 75%; animation-delay:0.4s;"></div>

CSS

body {
  margin:0;
}
div.box {
  width: 25%;
  height: 100%;
  position: absolute;
  background: black;
  animation: box 1.3s  forwards;
}
@keyframes box {
  100% {
    transform: translateY(100%);
  }
}