JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tab1" class="redBackground" onclick="clickTab(1);">Tab 1</div>
<div id="tab1Content" style="display:block">This is content for tab 1</div>
<div id="tab2" class="blueBackground" onclick="clickTab(2);">Tab 2</div>
<div id="tab2Content" style="display:none">This is content for tab 2</div>
<div id="tab3" class="blueBackground" onclick="clickTab(3);">Tab 3</div>
<div id="tab3Content" style="display:none">This is content for tab 3</div>

<script>
function clickTab(mode){
// default for those not in case
document.getElementById("tab1").className = "blueBackground";
document.getElementById("tab1Content").style.display = "none";
document.getElementById("tab2").className = "blueBackground";
document.getElementById("tab2Content").style.display = "none";
document.getElementById("tab3").className = "blueBackground";
document.getElementById("tab3Content").style.display = "none";

switch(mode){
    case 1: document.getElementById("tab1").className = "redBackground";
            document.getElementById("tab1Content").style.display = "block";
            break;
    case 2: document.getElementById("tab2").className = "redBackground";
            document.getElementById("tab2Content").style.display = "block";
            break;
    case 3: document.getElementById("tab3").className = "redBackground";
            document.getElementById("tab3Content").style.display = "block";
            break;   
    default:
            return;     
    }
}
    </script>

CSS

.redBackground{
    background:red;
}
.blueBackground{
    background:blue;
}