gmx.css/src/_tabs.css

A micro Material Design 3 based CSS-only framework.

.tabs {
    display: flex;
    background: var(--m3-scheme-surface);
    border-bottom: 1px solid var(--m3-scheme-outline-variant);
}

.tabs.variable {
    padding: 0 1rem;
}

.tabs.variable>* {
    width: max-content;
    padding: .65rem 1rem;
}

.tabs>* {
    position: relative;
    font-size: .875rem;
    font-weight: 500;
    padding: .65rem 0;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: .1s;
}

.tabs i {
    display: block;
}

.tabs i * {
    font-size: 1.5rem;
}

.tabs>label:has(input:checked) {
    color: var(--m3-scheme-primary);
}

.tabs>label:has(input:checked):after {
    content: "";
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: .15rem;
    width: 3rem;
    margin: 0 auto;
    background: var(--m3-scheme-primary);
}