JSFiddle - React, Tailwind, and code Playground

HTML

Choose a colour: 
<button id="Red">Red</button><button id="Green">Green</button><button id="Blue">Blue</button>
<button id="Yellow">Yellow</button><button id="Orange">Orange</button><button id="Pink">Pink</button>
<button id="Purple">Purple</button><button id="White">White</button>
<div></div>

CSS

div { width: 100%; height: 300px; }

JavaScript

var div = document.getElementsByTagName("div")[0],
    btns = document.getElementsByTagName("button"),
    col;
/*
if (window.location.search && (col = /col=([^&]+)/.exec(window.location.search))) {
    setColor(col[1]);
}
*/
function setColor(col) {
    var i = btns.length;

    div.style.backgroundColor = col;

   // while (i--) 
     //   btns[i].disabled = btns[i].textContent.toLowerCase() == col;
}

document.body.onclick = function (evt) {
//    var col = evt.target.textContent.toLowerCase();
    var col = evt.target.id.toLowerCase();
    console.log(col);
    if (evt && evt.target.nodeName.toLowerCase() == "button") {
        
        /** set the history state, passing a JSON object to pushState **/
        history.pushState({color:col}, null, "?col="+col);
        
        setColor(col);
    }
}

/** when back/forward is clicked, this event fires **/
window.onpopstate = function (evt) {
    
    /** event.state contains the stored JS object, so we can pass it back **/
    console.log('State color : ' + evt.state.color);
    setColor(evt.state.color);
}