JSFiddle - React, Tailwind, and code Playground

by marbinjavier

HTML

<button id= "bck">prev</button>
<button id= "fwd">next</button>

CSS

body {
    background-repeat:no-repeat;
    background-attachment:fixed;		
    background-position:center;
    background-size:contain;
    background-image:url("http://upload.wikimedia.org/wikipedia/commons/b/b4/Gurue_Mount_Murresse.jpg");
    transition:background-image 1s ease-in-out;
}

JavaScript

function change(){
    document.body.style.backgroundImage = 'url("http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png")';    
};

function reverse(){
    document.body.style.backgroundImage = 'url("http://upload.wikimedia.org/wikipedia/commons/b/b4/Gurue_Mount_Murresse.jpg")';    
};

document.getElementById("bck").addEventListener("click", function(){
	reverse();
});

document.getElementById("fwd").addEventListener("click", function(){
	change();
});