JSFiddle - React, Tailwind, and code Playground

by nicholaschris

HTML

<div id="slideshow" class="gallery">
    <div id="student-blurb" class="green-box">
        <div class="yellow-box"><a href="">Link</a>

        </div>
        <div class="yellow-box"><a href="">Link</a>

        </div>
        <div class="yellow-box"><a href="">Link</a>

        </div>
    </div>
    <div id="teacher-blurb" class="orange-box">
        <div class="yellow-box"><a href="">Link</a>

        </div>
        <div class="yellow-box"><a href="">Link</a>

        </div>
        <div class="yellow-box"><a href="">Link</a>

        </div>
    </div>
</div>
<div class="blue-box"></div>
<div class="blue-box"></div>
<div class="green-box"></div>

CSS

.gallery {
    margin: 0 auto;
    padding: 20px;
    background: red;
}
.yellow-box {
    background: yellow;
    display: inline-block;
}
.green-box {
    background: green;
}

.orange-box {
    background: orange;
}

.blue-box {
    margin: 0 auto;
    padding: 20px;
    background: blue;
}

JavaScript

$(document).ready(function () {
    $('#slideshow > #studentblurb').hide();
    setInterval(function () {
        $('#studentblurb').fadeIn(1000).fadeOut(1000)
            .
    }, 6000);
});