JSFiddle - React, Tailwind, and code Playground

HTML

<pre class="dialog__select"> 
    <div class="dialog__row dialog__tablist"> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
    </div>
    <div class="dialog__row dialog__tablist"> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
    </div>
    <div class="dialog__row dialog__tablist"> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
    </div>
    <div class="dialog__row dialog__tablist"> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
        <div class="dialog__tab">Text</div> 
    </div>
</pre>

<pre id="out"></pre>

CSS

* {
  padding: 1em;
}

#out {
  position: fixed;
  background-color: #ccc;
  left: 300px;
  top: 30px;
}

.active {
  outline: dashed 2px red;
}

JavaScript

document.addEventListener('click', function(evt) {
  const dialogTab = evt.target.closest('.dialog__tab');
  if (dialogTab) { // если клик был по табу
    reset();
    const dialogSelect = evt.target.closest('.dialog__select');
    const dialogRow = evt.target.closest('.dialog__row');
    
    
    // вывод
    console.log({dialogTab, dialogRow, dialogSelect}, evt);
    out.textContent = 'sel: '+ getIndexInParent(dialogSelect) +
    '\nrow: ' + getIndexInParent(dialogRow) +
    '\ntab: ' + getIndexInParent(dialogTab);
  }

});

function getIndexInParent(el) {
  highlight(el);
  return [...el.parentNode.children].indexOf(el);
}

function highlight(el) {
	el.classList.add('active');
}

function reset() {
  document.querySelectorAll('.active').forEach(el => el.classList.remove('active'));
}