<section class="filters">
  <ul class="filters-content">
    <button class="filters__button is-active" data-target="#projects">
      Projects
    </button>
    <button class="filters__button" data-target="#skills">
      Skills
    </button>
    <button class="filters__button" data-target="#experience">
      Experience
    </button>
  </ul>

  <div>
    <div data-content class="is-active" id="projects">
      <h2>Project</h2>
    </div>

    <div data-content id="skills">
      <h2>Skills</h2>
    </div>
    <div data-content id="experience">
      <h2>Experience</h2>
    </div>
  </div>
</section>

body {
  background: #fff;
}
.filters {
  font-family: sans-serif;
  &-content {
    margin: 2rem 0 2.5rem;
    background-color: #eee;
    padding: 0.375rem;
    border-radius: 0.75rem;
    display: flex;
    justify-content: space-between;
    column-gap: 0.5rem;
  }
  &__button {
    width: 100%;
    border: none;
    outline: none;
    padding: 1rem;
    transition: 0.3s;
    border-radius: 0.5rem;
    &:hover {
      background-color: #fff;
    }
  }
}

.projects {
}
.skills {
}

/* Hide*/
.filters [data-content] {
  display: none;
}
[data-content].is-active[data-content] {
  display: grid;
}
[data-target].is-active {
  background-color: #4042f6;
  color: #fff;
}

const tabs = document.querySelectorAll("[data-target]"),
  tabContents = document.querySelectorAll("[data-content]");

tabs.forEach((tab) => {
  tab.addEventListener("click", () => {
    const target = document.querySelector(tab.dataset.target);

    tabContents.forEach((tc) => {
      tc.classList.remove("is-active");
    });
    target.classList.add("is-active");

    tabs.forEach((t) => {
      t.classList.remove("is-active");
    });
    tab.classList.add("is-active");
  });
});