JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu"></div>
<div id="cols">
    <div id="cols_1"></div>
    <div id="cols_2"></div>
</div>
<div id="center">
    <div id="green">Green</div>
    <div id="bordeaux">Bordeaux</div>
</div>

CSS

body {
    font-family: arial;
    font-size: 13px;
}

#menu {
    background-color: #000;
    border-bottom: 3px solid #E8920C;
    width: 80%;
    height: 40px;
    margin: auto;
}

#cols {
    width: 80%;
    padding-top: 10px;
    margin: auto;
}

#cols #cols_1 {
    background-color: #000;
    border-top: 3px solid #E8920C;
    width: 78%;
    height: 200px;
    float: left;
}

#cols #cols_2 {
    background-color: #000;
    border-top: 3px solid #E8920C;
    width: 20%;
    height: 200px;
    float: right;
}

#center {
    color: #fff;
    text-align: center;
}

#center #green {
    background-color: #448F44;
    border: 1px solid #000;
    display: inline-block;
    width: 100px;
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
}

#center #bordeaux {
    background-color: #E8920C;
    border: 1px solid #000;
    display: inline-block;
    width: 100px;
    padding: 10px;
    cursor: pointer;
}

JavaScript

document.getElementById("green").onclick = function() {colorGreen()};
document.getElementById("bordeaux").onclick = function() {colorBordeaux()};
function colorGreen() {
	document.getElementById("menu").style.borderBottom = "3px solid #448F44";
    document.getElementById("cols_1").style.borderTop = "3px solid #448F44";
    document.getElementById("cols_2").style.borderTop = "3px solid #448F44";
}
function colorBordeaux() {
	document.getElementById("menu").style.borderBottom = "3px solid #E8920C";
    document.getElementById("cols_1").style.borderTop = "3px solid #E8920C";
    document.getElementById("cols_2").style.borderTop = "3px solid #E8920C";
}