JSFiddle - React, Tailwind, and code Playground

HTML

<div class=carousel>
    	<ul class=panes>
	        <li>
                <h2>1. Climbing Snowdon</h2>
                <img src=http://farm5.static.flickr.com/4116/4877345244_6cf40b2d42.jpg alt="">
	        </li>
        
	        <li>
	            <h2>2. Crib Goch</h2>
	            <img src=http://farm5.static.flickr.com/4121/4877354764_7e31588287.jpg alt="">
	        </li>
        
	        <li>
	            <h2>3. Crib Goch</h2>
	            <img src=http://farm5.static.flickr.com/4076/4877358076_9a02fb2f98.jpg alt="">
	        </li>
        
	        <li>
	            <h2>4. Nevis Summit</h2>
	            <img src=http://farm7.static.flickr.com/6050/6250747475_bc9f5069a4.jpg alt="">
	        </li>
        
	        <li>
	            <h2>5. CMD Arete</h2>
	            <img src=http://farm7.static.flickr.com/6055/6251268362_c3a1973019.jpg alt="">
	        </li>
	    </ul>
    </div>

CSS

.carousel {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.panes {
    animation: 30s ease 0s normal none infinite carousel;
    list-style: none outside none;
    overflow: hidden;
    position: relative;
    width: 500%;
}
.panes > li {
    float: left;
    position: relative;
    width: 20%;
}
.panes > li > a {
    display: block;
}
.carousel img {
    display: block;
    max-width: 100%;
    width: 100%;
}
.carousel h2 {
    background-color: rgba(0, 0, 0, 0.75);
    bottom: 10px;
    color: #fff;
    font-size: 1em;
    left: 10px;
    padding: 0.5em;
    position: absolute;
    right: 10px;
    text-align: right;
}
@keyframes carousel {
0% {
    left: 0;
}
11% {
    left: 0;
}
12.5% {
    left: -100%;
}
23.5% {
    left: -100%;
}
25% {
    left: -200%;
}
36% {
    left: -200%;
}
37.5% {
    left: -300%;
}
48.5% {
    left: -300%;
}
50% {
    left: -400%;
}
61% {
    left: -400%;
}
62.5% {
    left: -300%;
}
73.5% {
    left: -300%;
}
75% {
    left: -200%;
}
86% {
    left: -200%;
}
87.5% {
    left: -100%;
}
98.5% {
    left: -100%;
}
100% {
    left: 0;
}
}
@keyframes carousel {
0% {
    left: 0;
}
11% {
    left: 0;
}
12.5% {
    left: -100%;
}
23.5% {
    left: -100%;
}
25% {
    left: -200%;
}
36% {
    left: -200%;
}
37.5% {
    left: -300%;
}
48.5% {
    left: -300%;
}
50% {
    left: -400%;
}
61% {
    left: -400%;
}
62.5% {
    left: -300%;
}
73.5% {
    left: -300%;
}
75% {
    left: -200%;
}
86% {
    left: -200%;
}
87.5% {
    left: -100%;
}
98.5% {
    left: -100%;
}
100% {
    left: 0;
}
}