JSFiddle - React, Tailwind, and code Playground

HTML

<div id="active-buttons" class="sidenav" style="padding-top: 100px;">
          <ul class="text-center">
            <li>
              <a href="#Profile" class="active-list">Profile</a>
            </li>
            <li>
              <a href="#Experience">Experience</a>
            </li>
            <li>
              <a href="#Projects">Projects</a>
            </li>
            <li>
              <a href="#Skills">Skills</a>
            </li>
          </ul>
        </div>

CSS

.sidenav {
  width: 130px;
  position: fixed;
  z-index: 1;
  top: 20px;
  left: 10px;
  overflow-x: hidden;
}

.sidenav ul {
  background-color: black;
  list-style: none;
  padding: 0px;
  padding-right: 0px;
}

.sidenav > ul > li {
  color: white;
  margin: 0px;
}

.sidenav a {
  text-decoration: none;
  font-size: 18px;
  display: block;
  line-height: 4em;
  color: white;
  background-color: black;
}

.sidenav a:hover {
  color: grey;
}

div ul li a.active-list {
  background-color: #e2c9be;
  color: black;
}

JavaScript

let elements = document.querySelectorAll('div, ul, li, a');

elements.forEach(i => {
  i.addEventListener('click', function() {
    elements.forEach(j => j.classList.remove('active-list'));
    this.classList.add('active-list');
  });
});