Табы в табах, отображение контента над кнопками и под кнопками

const tabsBtn   = document.querySelectorAll(".tabs__nav-btn");
const tabsItems = document.querySelectorAll(".tabs__item");



tabsBtn.forEach(onTabClick);

function onTabClick(item) {
    item.addEventListener("click", function() {
        let currentBtn = item;
        let tabId = currentBtn.getAttribute("data-tab");
        let currentTab = document.querySelector(tabId);

        if( ! currentBtn.classList.contains('active') ) {
            tabsBtn.forEach(function(item) {
                item.classList.remove('active');
            });
    
            tabsItems.forEach(function(item) {
                item.classList.remove('active');
            });
    
            currentBtn.classList.add('active');
            currentTab.classList.add('active');

            
        }
    });
}


document.querySelector('.tabs__nav-btn').click();

const tabsBtn1   = document.querySelectorAll(".tabs__nav-btn--2");
const tabsItems1 = document.querySelectorAll(".tabs__item2");
const tabsItems3 = document.querySelectorAll(".pod-content");



tabsBtn1.forEach(onTabClick1);

function onTabClick1(item) {
    item.addEventListener("click", function() {
        let currentBtn = item;
        let tabId = currentBtn.getAttribute("data-tab");
        let currentTab = document.querySelector(tabId);

        if( ! currentBtn.classList.contains('actives') ) {
            tabsBtn1.forEach(function(item) {
                item.classList.remove('actives');
            });
    
            tabsItems1.forEach(function(item) {
                item.classList.remove('actives');
            });
    
            currentBtn.classList.add('actives');
            currentTab.classList.add('actives');

            
        }
    });
}


document.querySelector('.tabs__nav-btn--2').click();

/**ширина контейнера с контентом**/
 body{
    padding-left: 20%;
    padding-right: 20%;
    font-family:  'Open Sans', sans-serif;
  }



/**лейбл депинсол плюс**/
.square{
    width: 100%;
    height: 76px;
  background-image: url(https://static.tildacdn.com/tild3839-6664-4133-a462-616162613433/Group_4.svg);
  background-repeat: no-repeat;
  background-position: center;
  }

/**меню + адаптация меню**/
.tabs {
    position: fixed;
    top: 1rem;
    left: 1rem;
    background: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 1rem 0;
    box-shadow: 0 0 40px rgb(0 0 0 / 3%);
    bottom: 1rem;
  }


.tabs__nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
      border: 0;
}

.tabs__nav-btn {
    margin-bottom: 10px;
    padding: 12px 25px;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.tabs__nav-btn:last-child, .tabs__nav-btn--2:last-child {
    border-right: none;
}

.tabs__nav-btn:hover, .tabs__nav-btn--2:hover {
    background-color: #ddd;
}

.tabs__nav-btn.active{
    color: #fff;
    background-color: aqua;
}

.tabs__nav-btn--2.actives{
  background-color: rgb(223, 123, 2);
  color: white;
}

.eap-content{
  background-color: white;
  padding: 20px;
  border-radius: 16px;
  transition: 200ms;
}



.tabs__item, .tabs__item2{
    display: none;
}

.tabs__item.active, .tabs__item2.actives {
    display: block;
}

.mt-h1{
  width: 500px;
}

.mt-p{
width: 600px;
}


.b_1, .b_2 , .b_3, .b_4, .b_5, .b_6, .b_7, .b_8{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 25px;
    height: 25px;
}
/**Мой кабинет**/
.b_1{
background-image: url(https://static.tildacdn.com/tild3031-3131-4461-a263-626166346363/house-door.svg);
}
/**Провайдеры**/
.b_2{
    background-image: url(https://static.tildacdn.com/tild3139-3966-4336-b131-366630643036/eye.svg);
}
/**добавить провайдера**/
.b_3{
    background-image: url(https://static.tildacdn.com/tild6138-3633-4436-b661-316635333538/plus-square.svg);
}
/**Консультация**/
.b_4{
    background-image: url(https://static.tildacdn.com/tild3932-6439-4864-b136-643332336262/clipboard2-check.svg);
}
/**Опросы**/
.b_5{
    background-image: url(https://static.tildacdn.com/tild6165-3366-4666-b339-636363653431/pie-chart.svg);
}
/**Скидки**/
.b_6{
    background-image: url(https://static.tildacdn.com/tild3837-3766-4363-a239-396665326337/percent.svg);
}
/**Настройки**/
.b_7{
    background-image: url(https://static.tildacdn.com/tild3839-6666-4963-b331-313064363439/gear.svg);
}
/**Выход**/
.b_8{
    background-image: url(https://static.tildacdn.com/tild3533-3063-4234-b434-633162363031/exit-outline.svg);
}


[tooltip] {
    position: relative; 
  }
  

  [tooltip]::before,
  [tooltip]::after {
    text-transform: none; 
    font-size: .9em; 
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
  }
  [tooltip]::before {
    content: '';
    border: 5px solid transparent; /* opinion 4 */
    z-index: 1001; /* absurdity 1 */
  }
  [tooltip]::after {
    content: attr(tooltip); /* magic! */
    
    /* most of the rest of this is opinion */
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    
    /* 
      Let the content set the size of the tooltips 
      but this will also keep them from being obnoxious
      */
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
    z-index: 1000; /* absurdity 2 */
  }
  

  [tooltip]:hover::before,
  [tooltip]:hover::after {
    display: block;
  }
  

  [tooltip='']::before,
  [tooltip='']::after {
    display: none !important;
  }
  
 
  /* FLOW: RIGHT */
  [tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
  }
  [tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
  }
  
  /* KEYFRAMES */
  @keyframes tooltips-vert {
    to {
      opacity: .9;
      transform: translate(-50%, 0);
    }
  }
  
  @keyframes tooltips-horz {
    to {
      opacity: .9;
      transform: translate(0, -50%);
    }
  }
  
  /* FX All The Things */ 
  [tooltip]:not([flow]):hover::before,
  [tooltip]:not([flow]):hover::after,
  [tooltip][flow^="up"]:hover::before,
  [tooltip][flow^="up"]:hover::after,
  [tooltip][flow^="down"]:hover::before,
  [tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
  }
  
  [tooltip][flow^="left"]:hover::before,
  [tooltip][flow^="left"]:hover::after,
  [tooltip][flow^="right"]:hover::before,
  [tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
  }

.tabs__nav-btn--2{
  min-width: 121px;
  height: 100px;
  border: 0;
  text-align: left;
  background-color: white;
  border-radius: 6px;
}
  
.text-area-sector{
  margin-bottom: 30px;
  margin-left: 10px;
}
  
.prov-map-sector-scroll{
  display: flex;
  gap: 40px;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 17px;
  padding-top: 40px;
  scroll-padding: 22px;
}

body{
  background-color: #eaeef6;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>


    <div class="tabs">
        <div class="tabs__nav">
            <div class="square"></div>
            <span tooltip="Мой кабинет" flow="right">
            <button class="tabs__nav-btn" type="button" data-tab="#tab_1">
                <div class="b_1"></div>
            </button>
        </span>

        <span tooltip="Провайдеры" flow="right">
            <button class="tabs__nav-btn" type="button" data-tab="#tab_2">
                <div class="b_2"></div>
            </button>
        </span>
        

        <span tooltip="Добавить провайдера" flow="right">
            <button class="tabs__nav-btn" type="button" data-tab="#tab_3">
                <div class="b_3"></div>
            </button>
        </span>

        <span tooltip="Консультация" flow="right">
            <button class="tabs__nav-btn" type="button" data-tab="#tab_4">
                <div class="b_4"></div>
            </button>
        </span>

        <span tooltip="Опросы" flow="right">
            <button class="tabs__nav-btn" type="button" data-tab="#tab_5">
                <div class="b_5"></div>
            </button>
        </span>

        <span tooltip="Скидки" flow="right">
            <button class="tabs__nav-btn" type="button" data-tab="#tab_6">
                <div class="b_6"></div>
            </button>
        </span>

        <span tooltip="Настройки" flow="right">
            <button class="tabs__nav-btn" type="button" data-tab="#tab_7">
            <div class="b_7"></div>
        </button>
        </span>

        <span tooltip="Выход" flow="right">
            <button class="tabs__nav-btn" type="button" data-tab="#tab_8">
            <div class="b_8"></div>
        </button>
        </span>
        </div>
    </div>
        
        

        <div class="tabs__content">
           
            <div class="tabs__item" id="tab_1">
                <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
            </div>
            

            <div class="tabs__item" id="tab_2">

 <!--КОНТЕНТ ВКЛАДКИ "ПРОВАЙДЕРЫ"-->
            <div class="tabs__item2" id="tab_9">
                ЗАГОЛОВОК 1
                <p>1 ТЕКСТ ТУТ И ДИВ с текстом ПОД КНОПКАМИ </p>
            </div>

            <div class="tabs__item2" id="tab_10">
                ЗАГОЛОВОК 2
                <p>2 ТЕКСТ ТУТ И ДИВ с текстом ПОД КНОПКАМИ </p>
            </div>

            <div class="tabs__item2" id="tab_11">
                ЗАГОЛОВОК 3
                <p>3 ТЕКСТ ТУТ И ДИВ с текстом ПОД КНОПКАМИ </p>
            </div>
            
            <div class="tabs__item2" id="tab_12">
                ЗАГОЛОВОК 4
                <p>4 ТЕКСТ ТУТ И ДИВ с текстом ПОД КНОПКАМИ </p>
            </div>

            <div class="tabs__item2" id="tab_13">
                ЗАГОЛОВОК 5
                <p>5 ТЕКСТ ТУТ И ДИВ с текстом ПОД КНОПКАМИ </p>
            </div>

            <div class="tabs__item2" id="tab_14">
                ЗАГОЛОВОК 6
                <p>6 ТЕКСТ ТУТ И ДИВ с текстом ПОД КНОПКАМИ </p>
            </div>
      
        <!--КНОПКИ ПЕРЕКЛЮЧЕНИЯ КОНТЕНТА ВО ВКЛАДКЕ "ПРОВАЙДЕРЫ"-->
        <div class="buttons-content">
            <button class="tabs__nav-btn--2" type="button" data-tab="#tab_9"> <span>1</span></button>
                <button class="tabs__nav-btn--2" type="button" data-tab="#tab_10"><span>2</span></button>
                <button class="tabs__nav-btn--2" type="button" data-tab="#tab_11"><span>3</span></button>
                <button class="tabs__nav-btn--2" type="button" data-tab="#tab_12"><span>4</span></button>
                <button class="tabs__nav-btn--2" type="button" data-tab="#tab_13"><span>5</span></button>
                <button class="tabs__nav-btn--2" type="button" data-tab="#tab_14"><span>6</span></button>
            </div>
        </div>
         </div>
            </div>

  <!--ОСНОВНЫЕ ТАБЫ С НАВ МЕНЮ-->
            <div class="tabs__item" id="tab_3">
           
                <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
            </div>

            <div class="tabs__item" id="tab_4">
                <p>ormal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
            </div>

            <div class="tabs__item" id="tab_4">
                <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
            </div>

            <div class="tabs__item" id="tab_5">
                <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
            </div>

            <div class="tabs__item" id="tab_6">
                <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
            </div>

            <div class="tabs__item" id="tab_7">
                <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
            </div>

            <div class="tabs__item" id="tab_8">
                <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
            </div>

            




            
           
        </div>
    </div>
</div>


    <script src="app.js"></script>
    
</body>
</html>