JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<html>

<head>
    <title> CSS alpha animation test </title>
    <meta charset="utf-8" />

    
</head>

<body>

    <style>

    @-webkit-keyframes cf4FadeOut1 {
     0% {
       opacity:1;
       z-index: 100;
     }  
     80% { /* 6 sec trans on 30s animation */
       opacity:1;
       z-index: 100;
     }
     100% {
       opacity:0;
       z-index: 100;
     }
    }
        
    @-moz-keyframes cf4FadeOut1 {
     0% {
       opacity:1;
       z-index: 100;
     }  
     80% { /* 6 sec trans on 30s animation */
       opacity:1;
       z-index: 100;
     }
     100% {
       opacity:0;
       z-index: 100;
     }
    }
        
    @-ms-keyframes cf4FadeOut1 {
     0% {
       opacity:1;
       z-index: 100;
     }  
     80% { /* 6 sec trans on 30s animation */
       opacity:1;
       z-index: 100;
     }
     100% {
       opacity:0;
       z-index: 100;
     }
    }
    
    @-webkit-keyframes cf4FadeOut2 {
     0% {
       opacity:1;
       z-index: 2;
     }   
     90% { /* 6 sec trans on 60s animation */
       opacity:1;
       z-index: 2;
     }
     100% {
       opacity:0;
       z-index: 2;
     }
    }
        
    @-moz-keyframes cf4FadeOut2 {
     0% {
       opacity:1;
       z-index: 2;
     }   
     90% { /* 6 sec trans on 60s animation */
       opacity:1;
       z-index: 2;
     }
     100% {
       opacity:0;
       z-index: 2;
     }
    }
        
    @-ms-keyframes cf4FadeOut2 {
     0% {
       opacity:1;
       z-index: 2;
     }   
     90% { /* 6 sec trans on 60s animation */
       opacity:1;
       z-index: 2;
     }
     100% {
       opacity:0;
       z-index: 2;
     }
    }
    
    #cf4a {
        position:relative;
        height:250px;
        width:300px;
        margin:0 auto;
    }
    #cf4a a {
        position:absolute;
        left:0;
        z-index: 0;
    }
    
    #cf4a a {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
       ...