JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container clearfix">
     <h1>---</h1>

    <div class="box-color">
        <div class="choose-color">
            <button name="green">Green</button>
            <button name="blue">Blue</button>
            <button name="yellow">Yellow</button>
        </div>
    </div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
    border: 0;
}
.clearfix:after {
    content:' ';
    display: block;
    clear: both;
}
h1 {
    font-family:'ostrich-sans', sans-serif;
    border: 1px solid #ccc;
    text-align: center;
}
.container {
    border: 1px solid red;
    min-height: 300px;
}
button {
    width: 100%;
    height: 90px;
    background-color: #222;
    color: #ccc;
    font-family:'ostrich-sans', sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    margin-bottom: 10px;
    transition: background 1s;
    outline: none;
}
button:hover {
    background-color: #555;
}

JavaScript

var buttons = document.getElementsByTagName("button");

for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", message);
}

function message() {
    var name = this.name;
    if (name == "green") {
        alert("GREEN");
    } else if (name == "blue") {
        alert("BLUE");
    } else if (name == "yellow") {
        alert("YELLOW");
    }
}