JSFiddle - React, Tailwind, and code Playground

HTML

<span id="myElement" style="height: 500px; width: 300px; background-color: blue;"></span>

JavaScript

window.onload = function(){
    console.log(document.getElementById("myElement").classList);
    
    /*adding single class*/
    document.getElementById("myElement").classList.add("class1");
    
    /*adding multiple classs*/
    document.getElementById("myElement").classList.add("class2", "class3", "class4");
    
    /*delete a class*/
    document.getElementById("myElement").classList.remove("class1")
    
    /*delete multiple class*/
    document.getElementById("myElement").classList.remove("class2", "class3");
    
    //removes class4
    document.getElementById('element').classList.toggle("class4");
     
    //add class4
    document.getElementById('element').classList.toggle("class4");

}