Табы на чистом JS

// Табы
    const tabs = document.querySelector('.tabs');
    const tabsBtn = document.querySelectorAll('.tabs__btn');
    const tabsContent = document.querySelectorAll('.tabs__content');

    if (tabs) {
        tabs.addEventListener('click', (e) => {
            if (e.target.classList.contains('tabs__btn')) {
                const tabsPath = e.target.dataset.tabsPath;
                tabsBtn.forEach(el => {
                    el.classList.remove('tabs__btn--active')
                });
                document.querySelector(`[data-tabs-path="${tabsPath}"]`).classList.add('tabs__btn--active');
                tabsHandler(tabsPath);
            }
        });
    }

    const tabsHandler = (path) => {
        tabsContent.forEach(el => {
            el.classList.remove('tabs__content--active')
        });
        document.querySelector(`[data-tabs-target="${path}"]`).classList.add('tabs__content--active');
    };

 
.tabs {
    position: relative;
}

.tabs__list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.tabs__item:not(:last-child) {
    margin-right: 10px;
}

.tabs__btn {
    padding: 15px 62px;
    border: none;
    background-color: #0A3A68;
    color: #fff;
    cursor: pointer;
    border-top-left-radius: 4px;
    border-top-right-radius: 20px;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.tabs__btn:hover {
    background-color: #fff;
    color: #0A3A68;
}

.tabs__btn--active {
    background-color: #fff;
    color: #0A3A68;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    pointer-events: none;
}

.tabs__content {
    display: none;
    background-color: #fff;
}

.tabs__content--active {
    display: block;
}