<div class="tabs-content" id="tabs-content-0">
    <div class="tabs-btn" data-navigation>
  <button type="button" class="btnNavigation btnActive" data-tab="button_1"> logo_1 </button>
  <button type="button" class="btnNavigation" data-tab="button_2"> logo_2</button>
    </div>
    <ul data-main-content>

  <li class="contentList tabActive" id="tabs-content-1" data-content="button_1">
    <div class="tabs-btn" data-navigation>
      <button type="button" class="btnNavigation btnActive" data-tab="button_1">
        Кнопка 1
      </button>
      <button type="button" class="btnNavigation" data-tab="button_2">
        Кнопка 2
      </button>
      <button type="button" class="btnNavigation" data-tab="button_3">
        Кнопка 3
      </button>
    </div>
    <ul data-main-content>
      <li class="contentList tabActive" data-content="button_1">
        <h3 class="tab_title">Заголовок контента кнопки 1</h3>
        <p>
          Далеко-далеко за словесными горами в стране гласных и согласных живут
          рыбные тексты. Меня большой грамматики о использовало, если то!
          Ведущими парадигматическая великий необходимыми однажды, продолжил
          семантика буквоград рыбными живет? Она, последний приставка!
        </p>
      </li>

      <li class="contentList" data-content="button_2">
        <h3 class="tab_title">Заголовок контента кнопки 2</h3>
        <p>
          Далеко-далеко за словесными горами в стране гласных и согласных живут
          рыбные тексты. Меня большой грамматики о использовало, если то!
          Ведущими парадигматическая великий необходимыми однажды, продолжил
          семантика буквоград рыбными живет? Она, последний приставка!
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
      </li>

      <li class="contentList" data-content="button_3">
        <h3 class="tab_title">Заголовок контента кнопки 3</h3>
        <p>
          Далеко-далеко за словесными горами в стране гласных и согласных живут
          рыбные тексты. Меня большой грамматики о использовало, если то!
          Ведущими парадигматическая великий необходимыми однажды, продолжил
          семантика буквоград рыбными живет? Она, последний приставка!
        </p>
      </li>
    </ul>
  </li>

  <li class="tabs-content contentList" id="tabs-content-2" data-content="button_2">
    <div class="tabs-btn" data-navigation>
      <button type="button" class="btnNavigation btnActive" data-tab="button_1">
        Кнопка 2.1
      </button>
      <button type="button" class="btnNavigation" data-tab="button_2">
        Кнопка 2.2
      </button>
      <button type="button" class="btnNavigation" data-tab="button_3">
        Кнопка 2.3
      </button>
    </div>
    <ul data-main-content>
      <li class="contentList tabActive" data-content="button_1">
        <h3 class="tab_title">Заголовок контента кнопки 2.1</h3>
        <p>
          Далеко-далеко за словесными горами в стране гласных и согласных живут
          рыбные тексты. Меня большой грамматики о использовало, если то!
          Ведущими парадигматическая великий необходимыми однажды, продолжил
          семантика буквоград рыбными живет? Она, последний приставка!
        </p>
      </li>

      <li class="contentList" data-content="button_2">
        <h3 class="tab_title">Заголовок контента кнопки 2.2</h3>
        <p>
          Далеко-далеко за словесными горами в стране гласных и согласных живут
          рыбные тексты. Меня большой грамматики о использовало, если то!
          Ведущими парадигматическая великий необходимыми однажды, продолжил
          семантика буквоград рыбными живет? Она, последний приставка!
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
          culpa odio error? Eius, nihil quia iste mollitia dolorum aut corrupti
          in facere culpa, hic nisi. Molestias natus temporibus illum corrupti?
        </p>
      </li>

      <li class="contentList" data-content="button_3">
        <h3 class="tab_title">Заголовок контента кнопки 2.3</h3>
        <p>
          Далеко-далеко за словесными горами в стране гласных и согласных живут
          рыбные тексты. Меня большой грамматики о использовало, если то!
          Ведущими парадигматическая великий необходимыми однажды, продолжил
          семантика буквоград рыбными живет? Она, последний приставка!
        </p>
      </li>
    </ul>
  </li>
</div>
.tabs-content {
	//display: flex;
	justify-content: space-around;
	background-color: #f2f2f2;
	padding: 5px;
	margin: 0;
	margin-bottom: 25px;
}

.tabs-btn {
	margin-bottom: 5px;
}
.btnNavigation {
	cursor: pointer;
    padding: 20px;
    border-radius: 5px;
    color: #f51ad4;
    //width: 100%;
    text-align: center;
    margin-right: 5px;
    font-weight: bold;
	
}

.btnActive {
	background-color: #fff;
	color: #f85a16;
}

.tab_title {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 10px;
}
.contentList{
	display: block;
	background-color: #fff;
	padding: 15px;
}
.contentList:not(.tabActive) {
	display: none;
}
class Tabs {
  constructor(selector) {
    this.refs = {
      navigation: document.querySelector(`${selector} > [data-navigation] `),
      content: document.querySelector(`${selector} > [data-main-content]`),
    };
    this.refs.navigation.addEventListener('click', this.onChangeNavigation.bind(this));
  }
  onChangeNavigation({target}) {
    if (target.nodeName !== 'BUTTON') return;
    const currentButton = target;

    this.clearPrevClasses();
    this.addCurrentClass(currentButton);
  }

  clearPrevClasses() {
    const prevActiveButton = this.refs.navigation.querySelector('.btnActive');
    const prevActiveContent = this.refs.content.querySelector(':scope > .tabActive');

    if (prevActiveButton) {
      prevActiveButton.classList.remove('btnActive');
      prevActiveContent?.classList.remove('tabActive');
    }
  }
  addCurrentClass(currentButton) {
    const currentTab = currentButton.dataset.tab;
    const currentContent = this.refs.content.querySelector(`:scope > [data-content=${currentTab}]`, );

    currentButton.classList.add('btnActive');
    currentContent.classList.add('tabActive');
  }
}

tabs0 = new Tabs('#tabs-content-0');
tabs1 = new Tabs('#tabs-content-1');
tabs2 = new Tabs('#tabs-content-2');

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.