JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example one">Text 1</div>
<div class="example two">Text 3</div>
<div class="example three">Text 4</div>

CSS

.example {
  opacity: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: sans-serif;
  margin: 10px 0;
}

.one {
  animation:
    .35s ease 0.5s forwards fadeIn,
    .35s ease 2s reverse forwards fadeIn;
}

.two {
  animation:
    .35s ease 0.5s forwards fadeIn,
    .35s ease 4s reverse forwards fadeIn;
}

.three {
  animation:
    .35s ease 0.5s forwards fadeIn,
    .35s ease 6s reverse forwards fadeIn;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.7; }
}