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%;
}

#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);