JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="splash">

	</div>
</body>

CSS

a, span, p, h1, h2, h3, h4, h5, h6, body, input {
    margin: 0;
    padding: 0;
    outline: none;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
a, a:focus, a:hover, a:active{
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
p, h1, h2, h3, h4, h5, h6{
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
html{
	height: 100%;
	width: 100%;
}
body{
	overflow-y: scroll;
	overflow-x: hidden;
    background-image: white;
    height: 100%;
    width: 100%;
}
.inner{
	width: 85%;
	position: relative;
	margin: auto;
}
#splash{
	height: 95%;
	width: 100%;
	position: relative;
	-webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,1);
	box-shadow: 0 2px 10px 1px rgba(0,0,0,1);
}

JavaScript

$(document).ready(function(){

    	var images = [ "http://i.imgur.com/X2G0MEL.jpg", "http://i.imgur.com/5XMcoCX.jpg", "http://i.imgur.com/CTFvvcf.jpg"];
    	var currentImage = 0;

    function changeBackground() {
        $( '#splash' ).css( { background-image: 'url(' + images[ ++currentImage ] + ')' } );
        if ( currentImage >= images.length - 1 ) {
            currentImage -= images.length;
        }
    }

    setInterval( changeBackground, 3000 );  
});

    });