JSFiddle - React, Tailwind, and code Playground

by ignaciocorreia

HTML

<div id="slideshow">
    <div class="image slide-1"></div>
    <div class="image slide-2"></div>
    <div class="image slide-3"></div>
    <div class="image slide-4"></div>
</div>

CSS

#slideshow{background: #ececec;height: 768px;width: 1280px;overflow:hidden;}
#slideshow .image{
    height: 768px;
    width: 1280px;
    -webkit-animation: slideshowAnim ease-in-out 8s infinite;
    -moz-animation:    slideshowAnim ease-in-out 8s infinite;
    -o-animation:      slideshowAnim ease-in-out 8s infinite;
    -ms-animation:     slideshowAnim ease-in-out 8s infinite;
    animation:         slideshowAnim ease-in-out 8s infinite;
    position:absolute;
    left:0;
}
#slideshow .image.slide-1{background:url('http://placehold.it/1250x720/8ec34f&text=Slide 1') no-repeat center center transparent;}
#slideshow .image.slide-2{background:url('http://placehold.it/1250x720/8ec34f&text=Slide 2') no-repeat center center transparent;}
#slideshow .image.slide-3{background:url('http://placehold.it/1250x720/8ec34f&text=Slide 3') no-repeat center center transparent;}
#slideshow .image.slide-4{background:url('http://placehold.it/1250x720/8ec34f&text=Slide 4') no-repeat center center transparent;}

@-webkit-keyframes slideshowAnim {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes slideshowAnim {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes slideshowAnim {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes slideshowAnim {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}
#slideshow .image:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#slideshow .image:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#slideshow .image:nth-of-type(3) {
  -webkit-animation-delay: 2s;
 ...