JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
    <img class="one" src="http://lorempixel.com/380/320/sports">
    <img class="two" src="http://lorempixel.com/380/320/people">
    <img class="three" src="http://lorempixel.com/380/320/nightlife">
    <img class="four" src="http://lorempixel.com/380/320/city">
    <div class="preloader">&nbsp;</div>
</div>

CSS

#slider {
     border: thick solid #ddd;
     width: 380px;
     height: 320px;
     position: relative;
     overflow: hidden;
}
.preloader {
    width: 0%;
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    bottom: 0;
    z-index: 9;
    overflow: hidden;
    left: 5px;
    -webkit-animation: preloader 5s infinite;
    -moz-animation: preloader 5s infinite;
    -o-animation: preloader 5s infinite;
    animation: preloader 5s infinite;
}
#slider img {
     position: absolute;
     opacity: 0;    
     top: 5px; /*for the border*/
     left: 5px; /* '' */
}
.one {
     -webkit-animation: slider-one 20s infinite;
     -moz-animation: slider-one 20s infinite;
     -o-animation: slider-one 20s infinite;
     animation: slider-one 20s infinite;
}
.two {
     -webkit-animation: slider-two 20s infinite;
     -moz-animation: slider-two 20s infinite;
     -o-animation: slider-two 20s infinite;
     animation: slider-two 20s infinite;
}
.three {
     -webkit-animation: slider-three 20s infinite;
     -moz-animation: slider-three 20s infinite;
     -o-animation: slider-three 20s infinite;
     animation: slider-three 20s infinite;
}
.four {
     -webkit-animation: slider-four 20s infinite;
     -moz-animation: slider-four 20s infinite;
     -o-animation: slider-four 20s infinite;
     animation: slider-four 20s infinite;
}

@-webkit-keyframes preloader {
     0% { width: 0 }
     100% { width: 100% }
}
@-moz-keyframes preloader {
     0% { width: 0 }
     100% { width: 100% }
}
@-o-keyframes preloader {
     0% { width: 0 }
     100% { width: 100% }
}
@keyframes preloader {
     0% { width: 0 }
     100% { width: 100% }
}
@-webkit-keyframes slider-two {
     20% { opacity: 0 }
     25% { opacity: 1 }
     45% { opacity: 1 }
     50% { opacity: 0 }
}
@-webkit-keyframes slider-one {
     0% { opacity: 0 }
     5% { opacity: 1 }
     20% { opacity: 1 }
     25% { opacity: 0 }
}
@-webkit-keyframes slider-three {
     45% { opacity: 0 }
     50% { opacity: 1 }
    ...