JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slides">
    <ul><!-- slides -->
        <li><img src="http://cdn.imghack.se/images/08b84eb923891fcc01dd3cdc4c1b1c7b.png"></li>
        <li><img src="http://cdn.imghack.se/images/aface157d33eed1ac449df27428bb339.png"></li>
        <li><img src="http://cdn.imghack.se/images/30dba15fd1c89ad8b6e6363b8ede09f9.png"></li>

    </ul><!-- slides -->
</div>

CSS

.slides {
    height:300px;
    overflow:hidden;
    position:relative;
    width:705px;
    background: black;
    box-shadow: black 0 0 3px;
}
.slides ul {
    margin-top:0;
    list-style:none;
    position:relative;
    padding: 0;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {opacity:0;}
    25% {opacity:1;}
    50% {opacity:1;}
    75% {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes anim_slides {
    0% {opacity:0;}
    25% {opacity:1;}
    50% {opacity:1;}
    75% {opacity:1;}
    100% {opacity:0;}
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 4s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 2s;
    -moz-animation-delay: 2s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
}
.slides ul li img {
    display:block;
}