JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="class">
        Here for the second css the result must be a font size of 100px because inherit from container but...
    </div>
</div>

<div id="jsTest">
    HTML TEXT: 
</div>

CSS

/* FIRST CSS */
.class {
    color: red;
    font-size: 12px;
}

/* SECOND CSS */
#container {
    font-size: 100px;
}
.class {
    color: black;
    font-weight: bold;
}

JavaScript

/***************************/
/* First JS */

window.addEventListener('load', function(event) {
     document.getElementById('jsTest').innerHTML += ' Javascript from first JS // ';
     changeColor();
});

function changeColor() {
	document.getElementById('jsTest').style.setProperty('color', 'yellow');
}

/***************************/
/* Second JS */

window.addEventListener('load', function(event) {
	// THIS IS WRONG
     document.getElementById('jsTest').innerHTML += ' Javascript from second JS... <br/><br/> Adding text to the DOM, double execution generates problems.';
     changeColor();
});

// This Work
function changeColor() {
	document.getElementById('jsTest').style.setProperty('color', 'red');
}