JSFiddle - React, Tailwind, and code Playground

HTML

<div class="admix">
  <div class="topox"><h class="topotext">TITLE TOPO</h></div>
  <!--refazer bordas-->
  <div class="admenus">
    <button class="admenus1" data-show="balances"> Balances </button>
    <button class="admenus1" data-show="stats"> Stats </button>
    <button class="admenus1" data-show="configs"> Configurations </button>
    <button class="admenus1" data-show="pagez"> Page </button>
  </div>
  <div class="big-one show" id="balances">
    inside balances div
  </div>
  <div class="big-one" id="stats">
    inside stats div
  </div>
  <div class="big-one" id="configs">
    inside config div
  </div>
  <div class="big-one" id="pagez">
    inside page div
  </div>
</div>

CSS

.admenus1.visited {
  color: purple;
}

.big-one {
  display: none;
}

.big-one.show {
  display: block;
}

JavaScript

var buttons = document.querySelectorAll("[data-show]");
var current = document.querySelector(".big-one.show");
    
[].forEach.call(buttons, function (button, indice) {
  var bigOne = document.getElementById(button.dataset.show);  
  var seletor = "'[data-show='" + button.dataset.show + "']";  
  if (localStorage.getItem(seletor) === "true") {
    button.classList.add("visited");
  }  
  if (bigOne) {
    button.addEventListener("click", function () {    	
      localStorage.setItem(seletor, "true");
      button.classList.add("visited");      
      current.classList.remove("show");
      current = bigOne;
      current.classList.add("show");
    });
  }
});