JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">
	<div></div><!--
 --><div></div><!--
 --><div></div><!--
 --><div></div>
</div>

CSS

html, body {margin:0;height:100%;}
#slideshow, #slideshow div {height:100%;}
#slideshow {overflow:hidden;white-space:nowrap;}
#slideshow div {display:inline-block;vertical-align:top;white-space:normal;width:100%;background:#184F75;transition:all .7s ease-in-out;}
#slideshow div+div {background:#801A2D;}
#slideshow div+div+div {background:#3D7B19;}
#slideshow div+div+div+div {background:#75186F;}

JavaScript

var firstSlide = document.querySelector("#slideshow>div:first-child"),
	nbrSlides = document.querySelectorAll("#slideshow>div").length,
	curSlide = 0;

function autoSlide(){
	setInterval(function(){
		curSlide = (curSlide < nbrSlides-1) ? curSlide+1 : 0;
		firstSlide.style.marginLeft = "-" + (curSlide * 100) + "%";
	}, 3000);
}

window.addEventListener("load", autoSlide, false);

autoSlide();