JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="slideshow">
    <div style="background-image:url(http://dummyimage.com/800x600/cc5/999&text={A})"></div>
    <div style="background-image:url(http://dummyimage.com/800x600/909/999&text={B})"></div>
    <div style="background-image:url(http://dummyimage.com/800x600/6dd/999&text={C})"></div>
</div>

<div id="content-wrap">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>

CSS

#slideshow { position:absolute; z-index:1; top:0; left:0; right:0; bottom:0; }
#slideshow div { position:absolute; top:0; left:0; right:0; bottom:0; height:100%; background:no-repeat 50% 0; -webkit-background-size:cover; -moz-background-size:cover; }

#content-wrap { position:relative; z-index:2; padding:1em; background:rgba(255,255,255,0.5); }

JavaScript

$(document).ready(function() {
    $('#slideshow').cycle({
        timeout: 2000
        ,random: true
    });
});