JSFiddle - React, Tailwind, and code Playground

HTML

<header class="hero">
    <div class="backgrounds">
        <div class="mobile-background visible current"></div>
        <div class="desktop-background visible current"></div>
        <div class="checkout-background visible current"></div>
        <div class="connect-background visible current"></div>
        <div class="atlas-background visible current">
            <div class="map"></div>
            <svg viewBox="0 0 1226 340" id="back-rainbow" preserveAspectRatio="none">
                <defs>
                    <linearGradient x1="100%" y1="0%" x2="0%" y2="15%" id="back-rainbow-gradient">
                        <stop stop-color="#8DC6D8" offset="12%"></stop>
                        <stop stop-color="#CE97DF" offset="40%"></stop>
                        <stop stop-color="#FFCF9F" offset="90%"></stop>
                    </linearGradient>
                </defs>
                <path d="M1074 0C673.94.2 303.56 126 0 340h1226V6c-50.1-3.72-100.95-5.8-152-6z" fill="url(#back-rainbow-gradient)"></path>
            </svg>

            <svg viewBox="0 0 1031 475" id="front-rainbow" preserveAspectRatio="none">
                <defs>
                    <linearGradient x1="100%" y1="0%" x2="0%" y2="25%" id="front-rainbow-gradient">
                        <stop stop-color="#00D7B9" offset="0%"></stop>
                        <stop stop-color="#B95DD7" offset="50%"></stop>
                        <stop stop-color="#FFB367" offset="100%"></stop>
                    </linearGradient>
                </defs>
                <path d="M0 475h1031V0C630.46 33.34 270 208.52 0 475z" fill="url(#front-rainbow-gradient)" fill-opacity="0.65"></path>
            </svg>
        </div>
    </div>
</header>

CSS

.backgrounds > div {
    width: 500px;
    height: 100px;
    border: 1px solid black;
	position: relative !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:...