JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="changeme" class="big red"></div>
    
<button onclick="addClass('changeme', 'round')">Add a class</button>

CSS

.big {
   margin: 40px;
   width: 200px;
   height: 200px; 
}
.red {
   background: red;   
}
.round {
   border-radius: 50px;   
}

JavaScript

function addClass(id,new_class){
       var i,n=0;

       new_class=new_class.split(",");

       for(i=0;i<new_class.length;i++){
               if((" "+document.getElementById(id).className+" ").indexOf(" "+new_class[i]+" ")==-1){
                       document.getElementById(id).className+=" "+new_class[i];
                       n++;
               }
       }

       return n;
}