csslayout/contents/tab.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Tab	Create tabs with CSS flexbox	css flexbox, css navigation, css tab

HTML

<div class="tab">
    <!-- Active tab -->
    <div class="tab__item tab__item--active">
        ...
    </div>

    <!-- Inactive tab -->
    <div class="tab__item tab__item--inactive">
        ...
    </div>
</div>

CSS

.tab {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
}

.tab__item {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    padding: 0.5rem 1rem;
}

.tab__item--active {
    /* Border */
    border: 1px solid #d1d5db;
    /* Hide the bottom border */
    border-bottom-color: transparent;

    /* Border radius */
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.tab__item--inactive {
    /* Has only the bottom border */
    border-bottom: 1px solid #d1d5db;
}

{% demo %}{% include "covers/tab.njk" %}{% enddemo %}