JSFiddle - React, Tailwind, and code Playground

HTML

<!--Act as button-->
<div class="btn btn-success" id="1">Actions</div>
<div class="sprite-big not-visited" id="2">Tokens</div>


<!--These are the content div-->
<div id="actions">D1</div>
<div id="tokens">D2</div>

CSS

.sprite-big {
  display: block;
  border-style: solid;
  border-color: #bbb #888 #666 #aaa;
  border-width: 3px 4px 4px 3px;
  width: 9em;
  height: 2em;
  background: #ccc;
  color: #333;
  line-height: 2;
  text-align: center;
  text-decoration: none;
  font-weight: 900;
}

.sprite-big:hover {
  border-color: #666 #aaa #bbb #888;
  border-width: 4px 3px 3px 4px;
  color: #000;
}

JavaScript

HideDiv();
$('.sprite-big').on("click", function() {
  showHide($(this).prop('id'))
});

function showHide(id) {
  HideDiv();
  var id = '#D' + id;
  $(id).show();
}

function HideDiv() {

  $('#D1').hide();
  $('#D2').hide();
}