JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header-slider">
    <div>
         <h1>TĂ­tulo</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, neque, quasi, ducimus sint et beatae qui voluptatibus placeat tempora amet saepe minus est molestias pariatur provident. Ratione, excepturi eius dignissimos.</p>
    </div>
</div>

CSS

#header-slider {
    background-color: #fff;
    background-size: 100% auto;
    box-shadow: #000 0px 0px 15px;
    height: 450px;
    position: relative;
    width: 100%;
    -webkit-transition: background-image 0.7s ease-in-out;
    -moz-transition: background-image 0.7s ease-in-out;
    -o-transition: background-image 0.7s ease-in-out;
    -ms-transition: background-image 0.7s ease-in-out;
    transition: background-image 0.7s ease-in-out;
}
#header-slider div {
    background-color: rgba(255, 100, 0, 0.9);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
    bottom: 20px;
    color: #fff;
    right: 20px;
    padding: 30px;
    position: absolute;
    width: 50%;
}
#header-slider div h1 {
    font-size: 1.9em;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}
#header-slider div p {
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
}

JavaScript

$("#header-slider").css('background-image', 'url(http://www.downloadswallpapers.com/wallpapers/2012/janeiro/wallpaper-cidade-iluminada-4815.jpg)');


var imagens = [
    'url(http://wonderfulengineering.com/wp-content/uploads/2013/12/hd-wallpaper-desktop-1.jpeg)',
    'url(http://rricketts.com/wp-content/uploads/2013/10/wallpaper-2446558.jpg)',
    'url(http://www.downloadswallpapers.com/wallpapers/2012/abril/onda-de-agua-cristalina-wallpaper-4817.jpg)',
    'url(http://www.leadingwallpapers.com/wp-content/uploads/2013/10/mickey-mouse-wallpaper-sky.jpg)'],
    imgindex = 0,
    $header = $('#header-slider');


setInterval(function () {
    $header.css('background-image', imagens[imgindex++ % imagens.length]);
}, 3000);