JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
        <div id="tabs-1" class="tabs">
            <div class="tabs__nav tabs-nav">
                <div class="tabs-nav__item is-active" data-tab-name="tab-1">Таб 1</div>
                <div class="tabs-nav__item" data-tab-name="tab-2">Таб 2</div>
                <div class="tabs-nav__item" data-tab-name="tab-3">Таб 3</div>
            </div>
            <div class="tabs__content">
            <img class="pattern" src="img/2.jpg" alt="Строительство">
                <div class="tab is-active tab-1"> Содержание таба 1</div>
                <div class="tab tab-2">Содержание таба 2</div>
                <div class="tab tab-3">Содержание таба 3</div>
            </div>
        </div>


        <div id="tabs-2" class="tabs">
            <div class="tabs__nav tabs-nav">
                <div class="tabs-nav__item is-active" data-tab-name="tab-1">Таб 1</div>
                <div class="tabs-nav__item" data-tab-name="tab-2">Таб 2</div>
                <div class="tabs-nav__item" data-tab-name="tab-3">Таб 3</div>
            </div>
            <div class="tabs__content">
            <img class="pattern" src="img/2.jpg" alt="Строительство">
                <div class="tab is-active tab-1"> Содержание таба 1</div>
                <div class="tab tab-2">Содержание таба 2</div>
                <div class="tab tab-3">Содержание таба 3</div>
            </div>
        </div>
    </div>

CSS

.wrapper {
  margin: 0 auto;
  width: 800px;
}

.tabs-nav {
  display: flex;
  justify-content: space-between;
}
.tabs-nav__item {
  border-bottom: 1px solid transparent;
  cursor: pointer;
  flex: 1;
  padding: 20px;
}

.tabs-nav__item.is-active {
  border-color: #55a32a;
}

.tab {
  background-color: #f2f2f2;
  display: none;
  padding: 20px;
}
.tab.is-active { display: block; }

JavaScript

function tabs(selector) {
  const tab = document.querySelector(selector);
  const tabNav = tab.querySelectorAll('.tabs-nav__item');
  const tabContent = tab.querySelectorAll('.tab');

  let theContent = document.getElementsByClassName('.pattern');
  
alert(theContent);
  tab.addEventListener('click', selectTabNav);

  function selectTabNav(event) {
    const tabName = event.target.dataset.tabName;

    tabNav.forEach(item => item.classList.remove('is-active'));
    event.target.classList.add('is-active');

    if (!tabName) return;

    tabContent.forEach(item => {
      theContent.style.display = 'none';
      item.classList.contains(tabName) ?
      item.classList.add('is-active') :
      item.classList.remove('is-active');
    });

  }
}

tabs('#tabs-1');
tabs('#tabs-2');