JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block get">Get</div>
<div class="block give">Give</div>

CSS

*{
    margin:0;
    padding:0;
}
.block{

    width:100px;
    height:100px
    display:block;
    height:100px;
}

/* Defines the animation keyframes */
@-webkit-keyframes fadein {
    0% {
         opacity: 0;
     }
 
     72% {
         opacity: 0;
     }
 
     100% {
         opacity: 1;
     } 
}
@-moz-keyframes fadein {
      0% {
           opacity: 0;
       }
   
       72% {
           opacity: 0;
       }
   
       100% {
           opacity: 1;
       } 
}
@keyframes fadein {
     0% {
          opacity: 0;
      }
  
      72% {
          opacity: 0;
      }
  
      100% {
          opacity: 1;
      }

}


/* Defines the animation keyframes */
@-webkit-keyframes fadeOut {
    0% {
         opacity: 1;
     }
 
     72% {
         opacity: 0;
     }
 
     100% {
         opacity: 0;
     } 
}
@-moz-keyframes fadeOut {
      0% {
             opacity: 1;
         }
     
         72% {
             opacity: 0;
         }
     
         100% {
             opacity: 0;
         } 
}
@keyframes fadeOut {
     0% {
            opacity: 1;
        }
    
        72% {
            opacity: 0;
        }
    
        100% {
            opacity: 0;
        } 

}

.get{
  -webkit-animation: fadein 1.9s ease-in-out 0s 1, 
        fadeOut 1.9s ease-in-out 5s 1 ; 
  -moz-animation: fadein 1.9s ease-in-out 0s 1, 
        fadeOut 1.9s ease-in-out 5s 1 ;
  animation: fadein 1.9s ease-in-out 0s 1, 
        fadeOut 1.9s ease-in-out 5s 1 ;
    
    background-color:red;
  }
  
  
 
 .give{
   -webkit-animation: fadein 2.8s ease-in-out both 0s 1, 
        fadeOut 1.9s ease-in-out 8s 1 ;  ; 
   -moz-animation: fadein 2.8s ease-in-out both 0s 1, 
        fadeOut 1.9s ease-in-out 8s 1 ;  ;
   animation: fadein 2.8s ease-in-out both 0s 1, 
        fadeOut 1.9s ease-in-out 8s 1 ;  ;
     background-color:green;
   }