JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>


<div class='fade-in'>Fading In</div>
<div class='fade-out'>Fading Out</div>

CSS

.fade-in {
  background-color: red;
  animation:fadeIn 3s linear;
}

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

.fade-out {
  background-color: green;
  animation:fadeOut 3s linear;
}

@keyframes fadeOut {
  100% {
    opacity:0
  }
  0% {
    opacity:1;
  }
}