JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<nav class="navbar transparent">
  <div class="nav-wrapper black-text">
    <ul class="links right">
      <li><a id="infoBtn" class="link">INFO</a></li>
      <li><a id="faqBtn" class="link">FAQ</a></li>
      <li><a id="scheduleBtn" class="link">SCHEDULE</a></li>
      <li><a id="sponsorsBtn" class="link">SPONSORS</a></li>
      <li><a id="attendBtn" class="waves-effect waves-light btn-large qhgold">ATTEND</a></li>
    </ul>
  </div>
</nav>

CSS

body {
    font-family: 'Montserrat', sans-serif;
    overflow: hidden;
    background-color: grey;
}

.selected {
    font-weight: bold;
}

.navbar {
    background-color: transparent;
    height: 15vh;
    box-shadow: none;
}

.navbar #logo {
    max-height: 100%;
    padding: 20px 0px 0px 30px;
}

.navbar .links {
    padding-top: 35px;
}

.navbar li {
    margin-bottom: 10px;
}

.navbar .link::after {
    content: '';
    display: block;
    margin-top: -13px;
    width: 0;
    height: 5px;
    background: #ffffff;
    transition: width .3s;
}

.navbar .link:hover::after {
    width: 100%;
}

JavaScript

function goGold() {
    $('#attendBtn').removeClass('qhgold-text white selected').addClass('qhgold');
    $('.link').css('color','#fcb914');
    //$('.link::after').css('background','gold'); <--What should happen when call goGold();
}

function goWhite() {
    $('#attendBtn').removeClass('qhgold').addClass('qhgold-text white');
}