JSFiddle - React, Tailwind, and code Playground

by Kirubel Girma

HTML

<div class="xmain">
  <div class="xtwo out"><span>THIS IS AWESOME..</span></div>
  <div class="xone"><span>THIS IS AWESOMER</span></div>
</div>

CSS

* {
  margin: 0em;
}

.xmain {
  position: absolute;
  background: cornflowerblue;
  height: 100%;
  width: 100%;
}

.xone {
  height: 100%;
  width: 100%;
  background: grey;
}

.xtwo {
  height: 100%;
  width: 100%;
  background: green;
}

.in{
    animation: in .145s;
}

.out{
  animation: out .145s;
}

@keyframes in {
  0% {
    display: block;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes out {
  0% {
    display: block;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}