Crear tabs (pestañas interactivas) con Html, Css y JavaScript

<div class="tab">
    <div class="tab-head">
        <ul class="tabTitles">
            <li id="tabTitle-1" class=""><a>Perfil</a></li>
            <li id="tabTitle-2" class=""><a>Tablero</a></li>
            <li id="tabTitle-3" class=""><a>Ajustes</a></li>
            <li id="tabTitle-4" class=""><a>Contactos</a></li>
        </ul>
    </div>
    <div class="tab-body">
        <div id="tabContent-1" class="tabContent hidden" data-index="0"><p>Este es un contenido de marcador de posición del contenido <b>asociado de la pestaña Perfil</b>. Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido.</p></div>
        <div id="tabContent-2" class="tabContent hidden" data-index="1"><p>Este es un contenido de marcador de posición, el contenido <b>asociado de la pestaña Panel de control</b>. Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido.</p></div>
        <div id="tabContent-3" class="tabContent hidden" data-index="2"><p>Este es un contenido de marcador de posición del contenido <b>asociado de la pestaña Configuración</b>. Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido.</p></div>
        <div id="tabContent-4" class="tabContent hidden" data-index="3"><p>Este es un contenido de marcador de posición del contenido <b>asociado de la pestaña Contactos</b>. Al hacer clic en otra pestaña, se alternará la visibilidad de esta para la siguiente. La pestaña JavaScript intercambia clases para controlar la visibilidad y el estilo del contenido.</p></div>
    </div>
</div>

.hidden {
    display: none;
}
.show {
    display: block;
}
.tab-head {
    border-bottom: 1px solid #ccc;
}
.tabTitles {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.tabTitles li {
    list-style: none;
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: -1px;
}
.tabTitles li:hover {
    border-bottom: 2px solid #9e9e9e;
    margin-bottom: -1px;
}
.tabTitles li.show {
    border-bottom: 2px solid #2196f3;
    margin-bottom: -1px;
}
.tabTitles li a {
    color: #7c7c7c;
    text-decoration: none;
    padding: .7rem 1rem;
    cursor: pointer;
}
.tabTitles li.show:hover a {
    color: #2196f3;
}
.tabTitles li.show a {
    color: #2196f3;
}
.tab-body {
    padding: 1rem;
}

document.getElementById("tabTitle-1").classList.add("show");
document.getElementById("tabContent-1").classList.add("show");

const tabTitles = document.querySelectorAll(".tabTitles a");
const tabContents = document.querySelectorAll(".tabContent");
for(let el of tabTitles) {
    el.addEventListener( "click", e => {
        e.preventDefault();

        document.querySelector(".tabTitles li.show").classList.remove("show");
        document.querySelector(".tabContent.show").classList.remove("show");

        const parentListItem = el.parentElement;
        parentListItem.classList.add("show");
        const index = [...parentListItem.parentElement.children].indexOf(parentListItem);
    
        const panel = [...tabContents].filter(el => el.getAttribute("data-index") == index);
        panel[0].classList.add("show");
    })
};