JQuery Tabs Generator

<div id="tabs-1" class="tabs-container">

 <div id="tabs-nav">
  <a href="#" data-target="tab_1" class="tabs-menu active">Tab 1</a>
  <a href="#" data-target="tab_2" class="tabs-menu">Tab 2</a>
  <a href="#" data-target="tab_3" class="tabs-menu">Tab 3</a>
 </div>

 <div class="tabs-content">
  <div id="tab_1" class="tabs-panel"  style="display:block">
    <div class="flex-content">
      content 1
    </div>
  </div>

  <div id="tab_2" class="tabs-panel" >
    <div class="flex-content">
      content 2
    </div>
  </div>

  <div id="tab_3" class="tabs-panel" >
    <div class="flex-content">
      content 3
    </div>
  </div>

 </div>

</div>

.tabs-container {
  width: 100%;
}
div#tabs-nav {
  background-color: #1179ac;
  overflow: auto;
  position: relative;
  display: flex;
  justify-content: flex-start;
  gap: 5px 5px
}
a.tabs-menu {
  background-color: #1179ac;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  padding: 10px 10px;
  font-weight: bold;
  text-decoration: none;
  border: solid 2px #1179ac;
  display: inline-block;
  border-bottom: 0;
}
a.tabs-menu.active {
  background-color: #fff;
  border: solid 2px #1179ac;
  color: #6b6b6b;
  border-bottom: 0;
}
.tabs-content {
  border: solid 2px #1179ac;
  background-color: #fff;
  overflow: hidden;
  line-height: 1.5;
  margin-top: -2px;
}
.tabs-panel {
  display: none;
  min-height: 150px;
  overflow: auto;
  padding: 10px;
  height: 200px;
  font-size: 14px;
}

/************ CSS Animation ***********/

.animated-tabs {
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}
.bounceIn {
  animation-name: bounceIn;
}

class JsTabs {
    constructor(tabs_id, animation_class_list = []) {
        this.tabs = tabs_id;
        this.animationClasses = animation_class_list;
        this.menu = this.tabs.querySelectorAll(".tabs-menu");
        // add event click
        this.menu.forEach( element => {
            element.onclick = this.showTab.bind(this);
        });
    }
    showTab(event) {
        let current_tab_id = event.target;
        // prevent active tab
        if (current_tab_id.classList.contains('active')) {
            return;
        }
        let tabs_panel = this.tabs.querySelectorAll(".tabs-panel");

        // hide all tabs panel and remove animation classes
        tabs_panel.forEach( element => {
            element.style.display = "none";
            element.classList.remove(...this.animationClasses);
        });

        let target_id = current_tab_id.dataset.target;
        let current_tab = this.tabs.querySelector("#" + target_id);

        //show current tab
        current_tab.style.display = "block";

        // add animation classes
        current_tab.classList.add(...this.animationClasses);

        // remove class active tab menu
        this.menu.forEach( element => {
            element.classList.remove("active");
        });

        // add class active menu
        current_tab_id.classList.add("active");
        event.preventDefault();
    }
}

// usage
    // two arguments
    // 1  Tabs id (required) = document.getElementById('tabs-1')
    // 2  animation classes (optional) = array ["animated", "zoomIn"] 

new JsTabs(document.getElementById('tabs-1'), ["animated-tabs", "bounceIn"]);

// new JsTabs(document.getElementById('tabs-2'));