JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cssSlider">
  <div id="sliderImages">
		<img src="http://f.cybrox.eu/codepen/slider/slide1.jpg" alt="" />
		<img src="http://f.cybrox.eu/codepen/slider/slide2.jpg" alt="" />
		<img src="http://f.cybrox.eu/codepen/slider/slide3.jpg" alt="" />
		<img src="http://f.cybrox.eu/codepen/slider/slide4.jpg" alt="" />
		<img src="http://f.cybrox.eu/codepen/slider/slide5.jpg" alt="" />
	</div>
</div>

CSS

#cssSlider 
{
    /* Each Picture is 800px wide */
    max-width:800px;
	overflow: hidden;
	border: 10px solid #666;
}

#sliderImages 
{
    /* There are 5 pictures so the div needs to be 5x bigger */
	width : 500%;
	overflow: hidden;
    
    /* needed for Chrome/Safari/Opera */
	-webkit-animation: slide 20s infinite;
    /* Most Other Browsers */
	animation: slide 20s infinite;
}

#sliderImages img
{
    /* There are 5 pictures so each picture should take up 20% of the total space */
    width: 20%;
    float:left;
}

 /* needed for Chrome/Safari/Opera */
@-webkit-keyframes slide
{
	0%{margin-left: 0px;}
	15%{margin-left: 0px;}
	20%{margin-left: -100%;}
	35%{margin-left: -100%;}
	40%{margin-left: -200%;}
	55%{margin-left: -200%;}
	60%{margin-left: -300%;}
	75%{margin-left: -300%;}
	80%{margin-left: -400%;}
	95%{margin-left: -400%;}
	100%{margin-left: 0px;}
}

 /* Most Other Browsers */
@keyframes slide
{
	0%{margin-left: 0px;}
	15%{margin-left: 0px;}
	20%{margin-left: -100%;}
	35%{margin-left: -100%;}
	40%{margin-left: -200%;}
	55%{margin-left: -200%;}
	60%{margin-left: -300%;}
	75%{margin-left: -300%;}
	80%{margin-left: -400%;}
	95%{margin-left: -400%;}
	100%{margin-left: 0px;}
}