Creating Custom Tab Designs Example using JavaScript

*{
  margin: 0;
  padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
}
h2, p{
  margin-bottom: 15px;
}
.ath_tab_container {
  margin: 20px;
}
.ath_tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.ath_tab {
  padding: 10px 20px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-bottom: none;
  cursor: pointer;
  border-radius: 5px 5px 0 0 ;
}

.ath_tab:hover {
    background-color: #7e2eff;
    color: #fff;
    border: 1px solid #7e2eff;
}

.ath_tab.active {
    background-color: #7e2eff;
    color: #fff;
    border: 1px solid #7e2eff;
}
.ath_tab_content {
    display: none;
    padding: 10px 0;
    border-top: 1px solid #ccc;
}
.ath_tab_content.active {
  display: block;
}

const tabs = document.querySelectorAll('.ath_tab');
const tabContents = document.querySelectorAll('.ath_tab_content');

function showTab(tabIndex) {
  tabs.forEach((tab) => {
    tab.classList.remove('active');
  });
  tabContents.forEach((content) => {
    content.classList.remove('active');
  });
  tabs[tabIndex].classList.add('active');
  tabContents[tabIndex].classList.add('active');
}

tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    showTab(index);
  });
});

showTab(0); // show first tab by default

*{
  margin: 0;
  padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
}
h2, p{
  margin-bottom: 15px;
}
.ath_tab_container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    width: 1024px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
    margin-top: 20px;
    border-radius: 5px;
}
.ath_tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 100px;
    background: #ededed;
    border-radius: 5px;
    overflow: hidden;
}
.ath_tab{
  padding: 8px 5px;
  cursor: pointer;
}
.ath_tab.active {
    /* border-bottom: 2px solid #333; */
    background: #9e5df5;
    color: #fff;
}


.ath_tab_content {
  display: none;
  padding: 20px;
}

.ath_tab_content.active {
  display: block;
}

const ath_tabs = document.querySelectorAll('.ath_tab');
const tabContents = document.querySelectorAll('.ath_tab_content');

function showTab(tabIndex) {
  ath_tabs.forEach((tab) => {
    tab.classList.remove('active');
  });
  tabContents.forEach((content) => {
    content.classList.remove('active');
  });
  ath_tabs[tabIndex].classList.add('active');
  tabContents[tabIndex].classList.add('active');
}

ath_tabs.forEach((tab, index) => {
  tab.addEventListener('click', () => {
    showTab(index);
  });
});

showTab(0); // show first tab by default

*{
  margin: 0;
  padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
}
h2, p{
  margin-bottom: 15px;
}
.ath_tab_container {
    margin: 20px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    padding: 10px;
}
.ath_tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  border-bottom: 1px solid #c7a6ff;
}
.ath_tab {
  padding: 5px 20px;
  border-bottom: none;
  cursor: pointer;
  border-radius: 5px 5px 0 0 ;
}

.ath_tab:hover {
    border-bottom: 3px solid  #7e2eff;
}

.ath_tab.active {
    border-bottom: 3px solid  #7e2eff;
}
.ath_tab_content {
    display: none;
    padding: 10px 0;
}
.ath_tab_content.active {
  display: block;
}

$(document).ready(function() {
  // Show the first tab by default
  $('.ath_tab:first-of-type').addClass('active');
  $('.ath_tab_content:first-of-type').addClass('active');

  // Switch tabs when a tab link is clicked
  $('.ath_tab').click(function() {
    // Remove the active class from all tab links and tab contents
    $('.ath_tab').removeClass('active');
    $('.ath_tab_content').removeClass('active');

    // Add the active class to the clicked tab link
    $(this).addClass('active');

    // Get the ID of the corresponding tab content and add the active class to it
    var tabID = $(this).attr('data-tab');
    $('#' + tabID).addClass('active');
  });
});

*{
  margin: 0;
  padding: 0;
}
body{
    font-family: Arial, Helvetica, sans-serif;
}
h2, p{
  margin-bottom: 15px;
}
.ath_tab_container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    width: 1024px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
    margin-top: 20px;
    border-radius: 5px;
}
.ath_tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 100px;
    background: #ededed;
    border-radius: 5px;
    overflow: hidden;
}
.ath_tab {
    padding: 8px 5px;
    cursor: pointer;
    background: #c5b2ff;
    margin-bottom: 2px;
}

.ath_tab:hover {
    background: #9e5df5;
    color: #fff;
}


.ath_tab.active {
    /* border-bottom: 2px solid #333; */
    background: #9e5df5;
    color: #fff;
}


.ath_tab_content {
  display: none;
  padding: 20px;
}

.ath_tab_content.active {
  display: block;
}

$(document).ready(function() {
  // Show the first tab by default
  $('.ath_tab:first-of-type').addClass('active');
  $('.ath_tab_content:first-of-type').addClass('active');

  // Switch tabs when a tab link is clicked
  $('.ath_tab').click(function() {
    // Remove the active class from all tab links and tab contents
    $('.ath_tab').removeClass('active');
    $('.ath_tab_content').removeClass('active');

    // Add the active class to the clicked tab link
    $(this).addClass('active');

    // Get the ID of the corresponding tab content and add the active class to it
    var tabID = $(this).attr('data-tab');
    $('#' + tabID).addClass('active');
  });
});