JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fadein">
 <img src="1.png" width="auto" height="100%">
  <img src="2.png" width="auto" height="100%">
  <img src="3.png" width="auto" height="100%">
  <img src="4.png" width="auto" height="100%">
  <img src="5.png" width="auto" height="100%">
   <img src="6.png" width="auto" height="100%">
   <img src="7.png" width="auto" height="100%">
   <img src="8.png" width="auto" height="100%">
</div>

CSS

body,html {margin:0; padding:0; width:100%; height:100%}
.fadein { position:relative; width:auto; height:100%; }
.fadein img { position:absolute; left:0; right:0; top:0; margin:0 auto}

JavaScript

$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first- 
 child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
 });