JSFiddle - React, Tailwind, and code Playground

by viphalongpro

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%, 23%, 100% {opacity:1;}
    36%, 90% {opacity:0;}            
}
@-webkit-keyframes anim_slides2 {
    0%, 23%, 69%, 100% {opacity:0;}
    36%, 56% {opacity:1;}    
}

@-webkit-keyframes anim_slides3 {
    0%, 56%, 100% {opacity:0;}    
    69%, 89% {opacity:1;}    
}

@-moz-keyframes anim_slides {
    0%, 23%, 100% {opacity:1;}
    36%, 90% {opacity:0;}            
}
@-moz-keyframes anim_slides2 {
    0%, 23%, 69%, 100% {opacity:0;}
    36%, 56% {opacity:1;}    
}

@-moz-keyframes anim_slides3 {
    0%, 56%, 100% {opacity:0;}    
    69%, 89% {opacity:1;}    
}

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

    /* css3 animation */    
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;    
            
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
}



.slides ul  li:nth-child(1), .slides ul  li:nth-child(1) div {    
    -moz-animation-name: anim_slides;
    -webkit-animation-name: anim_slides;
}
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {           
    -webkit-animation-name: anim_slides2;
    -moz-animation-name: anim_slides2;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {        
    -webkit-animation-name: anim_slides3;
    -moz-animation-name: anim_slides3;
}

.slides ul li img {
    display:block;
}