JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<button id="replaceButton">files</button>
<div id="body"><p>

</p></div>
<button id="repButton">pink</button>
<div id="body2"><p>
tap it!
</p>

CSS

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

#body {
	  position: absolute;
		left: 30%;
		width: 30%;
		height: 50%;
		top: 30%;
		border-radius: 15%;
		background-color: black;
}

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

JavaScript

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

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