JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

body, html {
        margin:0;
        padding:0;
        width:100%;
        height:100%
    }
    .fadein {
        text-align:center;
        background-color:cornflowerblue;
    }
    .fadein img {
        height: 100%;
    }

JavaScript

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