JSFiddle - React, Tailwind, and code Playground

by dance2die

HTML

<button class="green">UPKEEP</button>
<button class="green">DRAW</button>
<button class="green">MAIN</button>
<button class="green">COMBAT</button>
<button class="green">MAIN</button>
<button class="green">END TURN</button>
<button class="green">CLEANUP</button>

CSS

button {
  width: 100%;
  padding: 10px 20px;
  margin: 3px;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

JavaScript

var buttons = document.querySelectorAll(".green");
for (button in buttons) {
  buttons[button].onclick = function() {
    console.log('test')
    var yellowButton = document.querySelectorAll(".yellow")[0];
    if (this.className == "green") {
      if (yellowButton) yellowButton.className = "green";
      this.className = "yellow";
    }
  }
}