JSFiddle - React, Tailwind, and code Playground

HTML

<header class="hero">
    <div class="backgrounds">
        <div class="mobile-background  "></div>
        <div class="desktop-background  "></div>
        <div class="checkout-background  "></div>
        <div class="connect-background  "></div>
    </div>
</header>

CSS

.backgrounds > div {
    width: 500px;
    height: 300px;
    transition: opacity 1s;
	display: block !important;
}

html#home {
    background: #f8f9fb
}

#main-header h1 a {
    -webkit-transition: background .77s cubic-bezier(.225, .5, .165, 1), filter .77s cubic-bezier(.225, .5, .165, 1);
    transition: background .77s cubic-bezier(.225, .5, .165, 1), filter .77s cubic-bezier(.225, .5, .165, 1)
}

#main-header .inner-col {
    -webkit-transition: border .77s cubic-bezier(.225, .5, .165, 1);
    transition: border .77s cubic-bezier(.225, .5, .165, 1)
}

#main-header nav ul li a,
#main-header nav ul li span {
    -webkit-transition: color .77s cubic-bezier(.225, .5, .165, 1), text-shadow .77s cubic-bezier(.225, .5, .165, 1), border .77s cubic-bezier(.225, .5, .165, 1);
    transition: color .77s cubic-bezier(.225, .5, .165, 1), text-shadow .77s cubic-bezier(.225, .5, .165, 1), border .77s cubic-bezier(.225, .5, .165, 1)
}

aside.update {
    background: #fff;
    border-bottom: 1px solid rgba(49, 78, 95, .12);
    margin-left: -10px;
    margin-right: -10px
}

aside.update strong {
    color: #292e31
}

aside.update strong:before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 16px;
    background-image: url(/img/home/banner/phone.png);
    vertical-align: middle;
    margin-right: 7px;
    position: relative;
    top: -2px
}

@media (min--moz-device-pixel-ratio:1.5),
(min-device-pixel-ratio:1.5),
(min-resolution:1.5dppx),
(min-resolution:138dpi),
all and (-webkit-min-device-pixel-ratio:1.5) {
    aside.update strong:before {
        background-image: url(/img/home/banner/phone@2x.png);
        background-size: 100% 100%
    }
}

aside.update p {
    margin: 0 auto;
    text-align: center;
    font-size: 1.4em;
    padding: 0
}

@media screen and (max-width:479px) {
    aside.update p {
        width: auto;
        font-size: 1.1em;
        padding-right: 10px;
        padding-left: 10px
    }
}

aside.update p a {
    color:...

JavaScript

function toggle(el, _class, delay) {
    setTimeout(function() {
        el.classList.toggle(_class);
    }, delay || 0);
}
var ultimo;
$$('.backgrounds > div').forEach(function(el, i) {
    setTimeout(function(elemento) {
        console.log(ultimo)
        if (ultimo) toggle(ultimo, 'current', 1000);
        toggle(elemento, 'current', 0);
        ultimo = elemento;
    }, i * 2000, el);
});