JSFiddle - React, Tailwind, and code Playground

by serio

HTML

<div class="fadein"> 
<img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> 
<img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> 
<img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
    <p>Lorizzle funky fresh dolizzle sit amizzle, consectetuer adipiscing ghetto. Shit sapizzle velizzle, daahng dawg shiz, quizzle, nizzle vizzle, arcu. Pellentesque eget tortor. Break it down erizzle. Gizzle dizzle dawg dapibizzle bow wow wow tempizzle shiz. Maurizzle pellentesque nibh izzle turpis. Shiznit izzle tortizzle. Fo shizzle eleifend rhoncizzle funky fresh. In break it down ghetto platea dictumst. For sure dapibizzle. Pizzle fo shizzle brizzle, pretizzle eu, mattizzle break it down, eleifend vitae, nunc. Yippiyo suscipizzle. Integer shut the shizzle up shiz you son of a bizzle mammasay mammasa mamma oo sa.</p>
</div>

CSS

.fadein { position:relative; height:332px; width:500px; }
.fadein img { position:absolute; left:0; top:0; }
.fadein p { position: absolute; color: red; left: 0; top: 0}

JavaScript

// original: http://snook.ca/technical/fade/fade.html

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