JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="AClass">This is H1</h1>
    	<h2 class="BClass">This is H2</h2>
    	<h1 class="AClass">This is H1 too</h1>
        <button id="btn">New Web Project Page</button>

CSS

.AClass{
	color: gray;
}
.BClass{
	color: black;
}

JavaScript

function clicks() {
	alert("buh!");
}

window.onload = function (){
    alert("loaded");
	var elem = document.getElementById("btn");
	elem.onclick =  clicks;
	
	
	var elements = document.getElementsByClassName("AClass");
	for(element in elements){
		element.mouseover = itsred;
		element.mouseout = itsgray;
	}
};


function itsred(){
    var elements = document.getElementsByClassName("AClass");
	for(element in elements){
		element.style.color="blue";
	}
}
function itsgrey(){
    var elements = document.getElementsByClassName("AClass");
	for(element in elements){
		element.style.color="grey";
	}
}