JSFiddle - React, Tailwind, and code Playground

HTML

<div id="hpbg-image">
    <div id="header">
        <div id="logo">
            <img src="images/logo.png" />
        </div>
        <div id="login">
            <img src="images/login.png" />
        </div>
        <div id="menu"></div>
    </div>
    <!--Header End-->
    <div id="search-area">
        <div id="holder1">
            <img src="images/slogan.png" />
            <br>
            <div id="searchbox"></div>
        </div>
    </div>
</div>
<div id="content1" style="height:150px">No minimum contract, pay for everything online</div>
<div id="howitworks"> <b>How it works</b>

</div>
<div id="freelancers" style="height:300px"></div>

CSS

#hpbg-image {
    position: relative;
    height: 100%;
    width: 100%;
    background: url(http://th05.deviantart.net/fs7/PRE/i/2005/246/f/1/My_freedom__your_freedom_by_celsojunior.jpg);
    transition: background 1s linear;
    background-size: cover;
    background-repeat: no-repeat;
}
#menu {
    padding-top:20px;
    padding-right:170px;
    position: absolute;
    right:0;
    color: #ffffff;
    font-family:'Verdana', serif;
}
#login {
    padding-top:8px;
    padding-right:50px;
    position: absolute;
    right:0;
}
#holder1 {
    margin: 0;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:838px;
}
#searchbox {
    height:78px;
    width:458px;
    background: url(images/searchbg.png);
    background-repeat: no-repeat;
    padding-top: 22px;
    padding-bottom: 18px;
    padding-left:40px;
    text-align: center;
    margin: 0 auto;
}

JavaScript

var images = [];
images[0] = "http://th05.deviantart.net/fs7/PRE/i/2005/246/f/1/My_freedom__your_freedom_by_celsojunior.jpg";
images[1] = "http://th09.deviantart.net/fs7/PRE/i/2005/224/e/2/Balloons_by_celsojunior.jpg";
images[2] = "http://fc02.deviantart.net/fs6/i/2005/081/a/f/The_farm_by_celsojunior.jpg";


var i = 1;
setInterval(fadeDivs, 2000);

function fadeDivs() {
    //start with id=0 after 5 seconds
    $('#hpbg-image').css("background-image", "url(" + images[i] + ")");
    i++;
    if (i == 3) i = 0; //repeat from start
}