JSFiddle - React, Tailwind, and code Playground

by joshuaohana

HTML

<div class="fade-me" id="toFade">
  <div>
  
  </div>
</div>

CSS

.fade-me > * {
  width: 200px;
  height: 200px;
  background-color: red;
  opacity: 0;
  display: none;
}

.fade-me.go > * {
  -webkit-animation: fadeIn 1s 0.5s forwards;
  animation: fadeIn 1s 0.5s forwards;
  display: inherit;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

JavaScript

var d = document.getElementById("toFade");
d.className += " go";