JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slides">
  <img src="http://lorempixel.com/500/300/?r=1">
  <img src="http://lorempixel.com/500/300/?r=2">
  <img src="http://lorempixel.com/500/300/?r=3">
  <img src="http://lorempixel.com/500/300/?r=4">
  <img src="http://lorempixel.com/500/300/?r=5">
</div>

CSS

.slides {
  box-shadow: 0px 0px 6px black;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slides img { 
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
}

.slides img:first-child { 
  z-index: 2;
  opacity: 1;
}

.slides img:last-child {
  z-index: 1;
  opacity: 1;
}

JavaScript

function nextSlide() {
	if (typeof $ == "undefined") var $ = function(sel) { return document.querySelector(sel); }	
	$(".slides").appendChild($(".slides img:first-child"));
}
setInterval(nextSlide, 3000)