JSFiddle - React, Tailwind, and code Playground

by Ricardo Ruiz

HTML

<div id="wrapper" class="opacity-transition hidden">
  text</div>

CSS

.opacity-transition {
  transition: opacity 2s ease-in;
}

.hidden {
  opacity: 0;
}

JavaScript

function fadeOnLoad() {
  var wrapper = document.getElementById("wrapper");
  wrapper.addEventListener("transitionend", function() {
    this.classList.remove("opacity-transition");
  });
  wrapper.classList.remove("hidden");
};

fadeOnLoad();