JSFiddle - React, Tailwind, and code Playground

by Weston Ruter

HTML

<button data-color="red">
Red
</button>

<button data-color="blue">
Blue
</button>

<button data-color="green">
Green
</button>

CSS

button {
  font-size: 50px;
}

button:active {
  color: white;
  background: black;
}

body {
  padding: 100px;
}

JavaScript

Array.from(document.querySelectorAll('button')).forEach( ( button ) => {
	button.addEventListener( 'click', ( event ) => {
  	document.body.style.backgroundColor = event.target.dataset.color;
  } );
} );