JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="darColor()">
	<div id="encabezado" onclick="cambiarColor()">
		<h1>¡ Leer es vivir !</h1>
	</div>
	<ul id="menu">
	  <li id="azul"><a href="#">INICIO</a></li>
	  <li id="amarillo"><a href="#">PÁGINA 1</a></li>
	  <li id="rojo"><a href="#">PÁGINA 2</a></li>
	  <li id="verde"><a href="#">NOSOTROS</a></li>
	</ul>
	
</body>

JavaScript

function darColor(){
			document.getElementById("encabezado").style.backgroundColor = "blue";
}

function cambiarColor(){
	if (document.getElementById("encabezado").style.backgroundColor == "blue"){
		document.getElementById("encabezado").style.backgroundColor = "yellow";
	}
	else if (document.getElementById("encabezado").style.backgroundColor == "yellow"){
		document.getElementById("encabezado").style.backgroundColor = "red";	
	}
	else if (document.getElementById("encabezado").style.backgroundColor == "red"){
		document.getElementById("encabezado").style.backgroundColor = "lime";
	}
	else if (document.getElementById("encabezado").style.backgroundColor == "lime"){
		document.getElementById("encabezado").style.backgroundColor = "blue";	
	}
}