JSFiddle - React, Tailwind, and code Playground

by Alex Fogarty

HTML

<div id="square">
I am a square. <br> And proud of it. 
</div>
<button id=button>
Change color
</button>

CSS

body {
  padding: 50px;
}
#square {
background-color: black;
color: white;
height: 100px;
width: 100px;
padding-top: 15px;
margin-right: auto;
margin-left: auto;
}
button {
  width: 100px;
  padding: 10px;
  display: block;
  margin-right: auto;
margin-left: auto;
  margin-top: 10px;
}

JavaScript

var box = document.getElementById("square");
var button = document.getElementById("button");

button.addEventListener('click', colorChange, false);

function colorChange(){
box.style.backgroundColor = "red";
}