JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="atd-cfi__tabs">
  <div class="atd-cfi-tabs__anchors">
    
      <a href="#tab-one" class="is-active">Tab One</a>
      <a href="#tab-two">Tab Two</a>
      <a href="#tab-three">Tab Three</a>
    
  </div>

  <section class="tab-content is-active" id="tab-one">Section One Content <a href="#tab-three" id="toTab3">link to Tab Three</a></section>
  <section class="tab-content" id="tab-two">Section Two Content</section>
  <section class="tab-content" id="tab-three">Section Three Content</section>
</div>

CSS

.tab-content {
  display: none;
}
.tab-content.is-active {
  display: block;
}
.tabs a {
  align-items: center;
  border-bottom-color: #dbdbdb;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  justify-content: flex-start;
  list-style: none;
}
.tabs a {
    display: block;
}
.tabs a.is-active a {
    border-bottom-color: #3273dc;
    color: #3273dc;
}
.tabs a {
  align-items: center;
  border-bottom-color: #dbdbdb;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  color: #4a4a4a;
  display: flex;
  justify-content: center;
  margin-bottom: -1px;
  padding: .5em 1em;
  vertical-align: top;
  cursor: pointer;
  text-decoration: none;
}
.tabs a:hover {
  border-bottom-color: #363636;
  color: #363636;
}

JavaScript

const tabs = document.querySelectorAll(".atd-cfi__tabs .atd-cfi-tabs__anchors a");
const sections = document.querySelectorAll(".atd-cfi__tabs .tab-content");

tabs.forEach(tab => {
  tab.addEventListener("click", e => {
    e.preventDefault();
    removeActiveTab();
    addActiveTab(tab);
  });
})

const removeActiveTab = () => {
  tabs.forEach(tab => {
    tab.classList.remove("is-active");
  });
  sections.forEach(section => {
    section.classList.remove("is-active");
  });
}

const addActiveTab = tab => {
  tab.classList.add("is-active");
  const href = tab.querySelector("a").getAttribute("href");
  const matchingSection = document.querySelector(href);
  matchingSection.classList.add("is-active");
}   

const tab_button = document.getElementById('toTab3');
tab_button.addEventListener("click", e => {
	tabs.forEach(tab => {
    tab.classList.remove("is-active");
     const matchingSection = document.querySelector(".atd-cfi__tabs .tab-content");
  	matchingSection.classList.remove("is-active");
  });
     const tab3 = document.getElementById('tab-three');
    tab3.classList.add("is-active");
    const li3 = document.getElementsByClassName("tab3");
    li3[0].classList.add("is-active");
});