JSFiddle - React, Tailwind, and code Playground

by thomas4g

HTML

<div class="tab">
    ...
</div>
<div class="tab">
    ...
</div>

CSS

.active 
{
 color:#fff;
 font-size:30px;
   background-color:blue;
   border:1px solid #000; 
}

JavaScript

function getByClass(_class, elem) {
    var i, result = [], elems = document.getElementsByTagName("div"); //get the elements
   for (i = 0; i < elems.length; i++) {
        if (elems[i].className.indexOf(_class) !== -1) { //if the elements have the class passed in, add it to the result array
            result.push(elems[i]);
        }
    }
    return result;
}
var i, tabs = getByClass("tab", "div"); //get all divs with class tab
for (i = 0; i < tabs.length; i++) { //for each tab...
    tabs[i].onclick = function() { //wire up it's click event...
        //to clear the other tabs...
        var j;
        for(j=0; j < tabs.length; j++) {
           tabs[j].className = tabs[j].className.replace(" active", "");
        }
       this.className += " active"; //where active is a class predefined in the CSS 
    };
}