JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slideshow">

  <div>
    <img src="https://www.port.ac.uk/-/media/images/news-events-and-blogs/news/2020/october/cat-eyes-closed-600x400.jpg">
  </div>

  <div>
    <img src="https://cdn.shopify.com/s/files/1/0997/4496/files/Untitled_design_19_grande.jpg">
  </div>

  <div>
    <img src="https://media.nature.com/lw800/magazine-assets/d41586-020-02779-3/d41586-020-02779-3_18481780.jpg">
  </div>

</div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#slideshow > div {
  position: absolute;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

JavaScript

$("#slideshow > div:gt(0)").hide();

	setInterval(function() { 
	  $('#slideshow > div:first')
	  .fadeOut(1000)
	  .next()
	  .fadeIn(1000)

	  setTimeout(function() {$('#slideshow > div:first').appendTo("#slideshow")}, 1000)

	}, 5000);