JSFiddle - React, Tailwind, and code Playground

by rgthree

HTML

<div id="layer">
    <h1>Lorem Ipsum</h1>
    <p>
      <span>Consectetur adipiscing elit.</span>
      <span>In accumsan massa quis quam </span>
      <span>suscipit aliquam.</span>
    </p>
</div>

CSS

* {transition: all 0.25s ease-in-out;}

#layer {margin: 15px; padding: 0 20px 20px; background: #900; color: #fff; display: inline-block;}

h1, span {
  opacity: 0;
  transform: translate(-10px, 10px);
}

.-ready h1,
.-ready span {
  display: block;
  opacity: 1;
  transform: translate(0, 0);
}

.-ready span {transition-delay: 0.25s;}
.-ready span + span {transition-delay: 0.5s;}
.-ready span + span + span {transition-delay: 0.75s;}

JavaScript

setTimeout(function() {
  document.getElementById('layer').classList.add('-ready');
});