JSFiddle - React, Tailwind, and code Playground

by Colin Brauns

HTML

<box></box>
<button reject>⇦</button>
<button accept>⇨</button>

CSS

button {
  background-color: #0d00b1;
  color: white;
  padding: 1em 1.5em;
  border: none;
  font-size: 1.5em;
}

box {
  background-color: white;
  display: block;
  width: 3em;
  height: 4em;
  font-size: 6em;
}

box[review="reject"] {
  background-color: red;
}

box[review="accept"] {
  background-color: green;
}

JavaScript

var box = document.querySelector("box");
var rejectButton = document.querySelector("button[reject]");
var acceptButton = document.querySelector("button[accept]");

rejectButton.addEventListener("click",function(){
  box.setAttribute("review","reject");
});

acceptButton.addEventListener("click",function(){
  box.setAttribute("review","accept");
});