JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div>

CSS

:nth-child(1) { --nth-child: 1 }
:nth-child(2) { --nth-child: 2 }
:nth-child(3) { --nth-child: 3 }

div {
  width: 50px;
  height: 50px;
  background: red;
  opacity: 0;
  animation: fade-in calc(var(--nth-child) * 1s) 1s forwards;
}

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 1 }
}