JSFiddle - React, Tailwind, and code Playground

HTML

<div id='div1' class="redClass"></div>

<input type="button" value="ADD_RED" onclick="add_Red();" />

<input type="button" value="ADD_RED" onclick="add_Blue();" />

CSS

.redClass {
    height: 100px;
    width: 100px;
    background: #f00;
}

.blueClass {
    height: 100px;
    width: 100px;
    background: #00f;
}

JavaScript

function add_Red(){
document.getElementById('div1').className="redClass"; 
}


function add_Blue(){
document.getElementById('div1').setAttribute( "class", "blueClass" );
}