JSFiddle - React, Tailwind, and code Playground

by Lorena Brito

HTML

<div id="container">
    <div class="item" style="display: block; background-color:orange; height:600px;"><div class="topSect"><div class="middle"><h1 class="title inner" style="color: rgb(254, 226, 147);">Belgian Waffle of the Day</h1></div></div><div class="bottomSect"><div class="middle"><div class="inner"><h2 class="subTitle" style="color: rgb(245, 245, 242);">Big Island Waffle</h2> <p class="description" style="color: rgb(240, 233, 214);">Fresh Buttermilk Belgian Waffle with Fresh Bananas and Chopped Macadamia Nuts - $6.50</p></div></div></div></div><div class="item" style="display: block; background-color:green; height:600px;"><div class="topSect"><div class="middle"><h1 class="title inner" style="color: rgb(254, 226, 147);">Our Hawaiian Coffee of the day</h1></div></div><div class="bottomSect"><div class="middle"><div class="inner"><h2 class="subTitle" style="color: rgb(245, 245, 242);">100% KONA COFFEE</h2> <p class="description" style="color: rgb(240, 233, 214);">Medium Roast - Balanced with hints of toasted coconut and lilikoi. Roasted in small batches to our order!</p></div></div></div></div></div>

CSS

#container {
    background-color:#c1c1c1;
    height:600px;
}

JavaScript

function InOut( elem )
{
 elem.delay()
     .fadeIn()
     .delay(10000)
     .fadeOut( 
               function(){ 
                   if(elem.next().length > 0)
                   {InOut( elem.next() );}
                   else
                   {InOut( elem.siblings(':first'));}
                         
                 }
             );
}

$(function(){
$('#container .item').hide();
InOut( $('#container .item:first') );

});