JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://markpfaff.com/background-check.js"></script>
<script src="http://markpfaff.com/css-background.js"></script>
<div class="cb-slideshow">
    <ul>
        <li class="nav">About</li>
    </ul>
</div>

CSS

.cb-slideshow { 
    background-repeat: no-repeat;
    background-size:cover;
    width:300px;
    height:300px;
}

.nav {
    float:left;
}

.dark > li {
    color:#ffffff !important;
}

JavaScript

$(document).ready(function(){    

            //slideshow:
            $(function () {
                var slideshow = $('.cb-slideshow');
                var backgrounds = [
                    'url(http://markpfaff.com/bk1-dark.png)', 
                  'url(http://markpfaff.com/bk2-light.png)'];
                var colors = ["#ffffff", "#FF0000", "#000000"];
                var current = 0;
                               
                function nextBackground() {

                    slideshow.css(
                        'background-image',
                    backgrounds[current = ++current % backgrounds.length]);
                    slideshow.css("color", colors[current]);

                    setTimeout(nextBackground, 5000);
                }
           
                setTimeout(nextBackground, 5000);
                slideshow.css('background-image', backgrounds[0]);
            });

});