JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<button id="replaceButton">blue</button>
<div id="body"></div>
<button id="repButton">pink</button>
<div id="body2"></div>

CSS

body {
    font-family: "Comic Sans MS";
}
p {
	  font-size: 3em;
}

#body {
	  position: absolute;
		left: 30%;
		width: 30%;
		height: 30%;
		top: 30%;
		background-color: red;
}

#body2 {
	    position: absolute;
			left: 15%;
			top: 0%;
			width: 30%;
			height: 30%;
			background-color: black;
}

JavaScript

var replaceButton = document
   .getElementById("replaceButton");
replaceButton.addEventListener("click",replaceIt);

function replaceIt(){
 document.getElementById("body")
 .style.backgroundColor = "blue";
 document.getElement("body")
 .style.backgroundColor = "red"
}