JSFiddle - React, Tailwind, and code Playground

HTML

<div id="crossfade">
      <img src="http://i.imgur.com/kXFCth0.jpg" alt="Image 1">
      <img src="http://i.imgur.com/4iUzqj3.png" alt="Image 2">
      <img src="http://i.imgur.com/OfVX71v.png" alt="Image 3">
      <img src="http://i.imgur.com/HRgR6l8.png" alt="Image 4">
      <img src="http://i.imgur.com/OfVX71v.png" alt="Image 2">
    </div>

CSS

#crossfade > img {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 75s ease-in-out infinite 0s;
    -moz-animation: imageAnimation 75s ease-in-out infinite 0s;
    -o-animation: imageAnimation 75s ease-in-out infinite 0s;
    -ms-animation: imageAnimation 75s ease-in-out infinite 0s;
    animation: imageAnimation 75s ease-in-out infinite 0s;
}

#crossfade > img:nth-child(2)  {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
}
#crossfade > img:nth-child(3) {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}
#crossfade > img:nth-child(4) {
    -webkit-animation-delay: 45s;
    -moz-animation-delay: 45s;
    -o-animation-delay: 45s;
    -ms-animation-delay: 45s;
    animation-delay: 45s;
}
#crossfade > img:nth-child(5) {
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}

@-webkit-keyframes imageAnimation {
  0% { opacity: 0;
  -webkit-animation-timing-function: ease-in-out; }
  5% { opacity: 1;
  -webkit-animation-timing-function: ease-in-out; }
  100% { opacity: 1 }
}

@-moz-keyframes imageAnimation {
  0% { opacity: 0;
  -webkit-animation-timing-function: ease-in-out; }
  5% { opacity: 1;
  -webkit-animation-timing-function: ease-in-out; }
  100% { opacity: 1 }
}

@-o-keyframes imageAnimation {
  0% { opacity: 0;
  -webkit-animation-timing-function: ease-in-out; }
  5% { opacity: 1;
  -webkit-animation-timing-function: ease-in-out; }
  100% { opacity: 1 }
}

@-ms-keyframes...