Tabs

                
<div class="tab-layout">
    <div class="tabs">
        <button class="active" onclick="openTab(event, '.tab1')">HTML</button>
        <button onclick="openTab(event, '.tab2')">CSS</button>
        <button onclick="openTab(event, '.tab3')">JavaScript</button>
    </div>
    <pre class="tab1 active-tab-content">
        <code>
        ...
        </code>
    </pre>
    <pre class="tab2 tab-content">
        <code>
        ...
        </code>
    </pre>
    <pre class="tab3 tab-content">
        <code>
        ...
        </code>
    </pre>
</div>
                
            

                
p {
    margin: 0;
    line-height: 1.2;
}

.tab-layout {
    margin: 2rem;
    padding: 1rem;
    border: 1px solid black;
    border-radius: 1rem;
}

.tabs {
    text-align: start;
    display: flex;
    gap: 1rem;
}

.tabs button {
    cursor: pointer;
    padding-bottom: 0.5rem;
    background-color: transparent;
    border: none;
    color: rgb(82, 82, 82);
}

.tabs .active {
    color: black;
    border-bottom: 2px solid black;
}

.active-tab-content {
    margin-top: 1rem;
    background-color: black;
    color: white;
    border-radius: 1rem;
    display: flex;
    align-items: start;
    justify-content: start;
    overflow: auto;
}

.tab-content {
    display: none;
}

code {
    text-align: start;
    display: block;
    margin: 1rem;
}                    
                
            

                
const openTab = (e, selectedTab) => {

    const tabButton = document.querySelectorAll('button');
    tabButton.forEach(btn => btn.classList.remove('active'));
    e.currentTarget.classList.add('active');

    const tabContent = document.querySelectorAll('.active-tab-content');
    tabContent.forEach(tab => tab.classList.replace('active-tab-content', 'tab-content'));

    document.querySelector(selectedTab).classList.replace('tab-content', 'active-tab-content')
}