JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cf4a" class="shadow">
     <img src="http://www.momswhothink.com/images/stories/baby-names/female-cat-names.jpg"  />
         <img src="http://www.momswhothink.com/images/stories/baby-names/male-cat-names.jpg" />
        <img  src="http://www.momswhothink.com/images/stories/baby-names/Male-Cat-Names-Hub.jpg" />
            <img src="http://www.momswhothink.com/images/stories/baby-names/Female-Cat-Names-Hub.jpg"  />
            
    </div>

<!-- end snippet -->

CSS

@-webkit-keyframes cf4FadeInOut {
0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes cf4FadeInOut {
 0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes cf4FadeInOut {
0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@keyframes cf4FadeInOut {
0% {
    opacity:1;
  }
  15% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  90% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf4a {
  position:relative;
  height:571px;
  width:931px;
  margin:0 auto;
}
#cf4a img {
  position:absolute;
  left:0;
}

    #cf4a img {
    -webkit-animation: cf4FadeInOut 24s ease-in-out infinite;
    -moz-animation: cf4FadeInOut 24s ease-in-out infinite;
    -o-animation: cf4FadeInOut 24s ease-in-out infinite;
     animation: cf4FadeInOut 24s ease-in-out infinite;
    }
    #cf4a img:nth-child(4) {
    	
      -webkit-animation-delay: 18s;
      -moz-animation-delay: 18s;
      -o-animation-delay: 18s;
      animation-delay: 18s;
    }
    #cf4a img:nth-child(3) {
      -webkit-animation-delay: 12s;
      -moz-animation-delay: 12s;
      -o-animation-delay: 12s;
      animation-delay: 12s;
      
    }
    #cf4a img:nth-child(2) {
      -webkit-animation-delay: 6s;
      -moz-animation-delay: 6s;
      -o-animation-delay: 6s;
      animation-delay: 6s;
      visibility: visible;
    }
    #cf4a img:nth-child(1) {
      -webkit-animation-delay: 0;
      -moz-animation-delay: 0;
      -o-animation-delay: 0;
      animation-delay: 0;
      
    }