JSFiddle - React, Tailwind, and code Playground

by Aniruddha Galgali

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>

<div style="float:right;">     
   <button type="button" id="btn1" class="activeBtn" onclick="btnFunc1(event)">Active admins</button>
   <button type="button" id="btn2" class="deactiveBtn btnDeactivated" onclick="btnFunc1(event)">Deactivated admins</button>
   <button type="button" id="btn3" class="mybutton deactiveBtn btnDeactivated" onclick="btnFunc1(event)">Deactivated 2</button>
</div>
<script>
function deactivateAll(){
  console.log("deactivateAll")
	document.getElementById("btn1").classList.remove("activeBtn");
  document.getElementById("btn2").classList.remove("activeBtn");
  document.getElementById("btn3").classList.remove("activeBtn");
  document.getElementById("btn1").classList.add("btnDeactivated");
  document.getElementById("btn2").classList.add("btnDeactivated");
  document.getElementById("btn3").classList.add("btnDeactivated");
}
function btnFunc1(evtObj){
		deactivateAll();
    evtObj.target.classList.remove("btnDeactivated");
    evtObj.target.classList.add("activeBtn");
}

function btnFunc2(){
    document.getElementById("btn2").classList.remove("btnDeactivated");
    document.getElementById("btn1").classList.add("btnDeactivated");
}
</script>
</body>
</html>

CSS

.activeBtn {
        background-color: #4CAF50;
        border: none;
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        transition-duration: 0.2s;
        cursor: pointer;
        height: 40px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 10px;
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        width: 160px;
    }

    
        .btnDeactivated {
        background-color: white!important;
        color: black!important;
        border: 2px solid #008CBA!important;
    }
    

    
    .btnDeactivated:hover {
        background-color: #008CBA!important;
        color: white;
    }


    .deactiveBtn {
        background-color: #4CAF50;
        border: none;
        color: white;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        transition-duration: 0.2s;
        cursor: pointer;
        height: 40px;
        margin-top: 10px;
        margin-bottom: 10px;
        margin-right: 10px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        width: 160px;
    }