JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<div id="billboard" class="two">
    <div class="one">Jackpot share: 0 / Total Jackpot: 20</div>
    <div class="two">Points: 0 / The game ends in... never!</div>
</div>

CSS

#billboard {
    background-image: url( http://placehold.it/600x300&text=BILLBOARD );
    border: 10px solid red;
    height: 300px;
    margin: 50px;
    text-align: center;
}

#billboard.two {
    background-image: url( http://placehold.it/600x300&text=JACKPOT );
}

#billboard .one {
    border: 10px solid yellow;
}

#billboard .two {
    border: 10px solid purple;
}

/* Display the first one! */
#billboard.one .one {
    display: block;
}

#billboard.one .two {
    display: none;
}

/* Display the second one! */
#billboard.two .one {
    display: none;
}

#billboard.two .two {
    display: block;
}

JavaScript

var $billboard = $( '#billboard' );
    alternate = function() {
        if ( $billboard.hasClass( 'one' ) ) {
            $billboard.removeClass( 'one' ).addClass( 'two' );                             
        } else {
            $billboard.removeClass( 'two' ).addClass( 'one' );                        
        }
    };

setInterval( alternate, 1000 );