JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <button class="js-button default-button" data-description="Category A's Description" onclick="myFunction(this)">
    Category A
  </button>
  <button class="js-button default-button" data-description="Category B's Description" onclick="myFunction(this)">
    Category B
  </button>
</div>

<div id="js-description" class="description">
</div>

<script>
function myFunction(elem) {
  var x = document.getElementById("js-description");
  var description = elem.getAttribute('data-description');
  x.innerHTML = description;
  
  var button = document.getElementsByClassName('js-button');
  
  for (var i = 0; i < button.length; i++) {
    button[i].classList.remove('active-button');
  }
  
  elem.classList.add('active-button');
}
</script>

<style>
  .default-button{
    font-size:16px;
    border-radius: 4px;
    padding:7px 12px;
  }
  .active-button{
    background:blue;
    color:#fff;
  }
  .description{
    margin-top:20px;
  }
</style>