CodePen Embed - tabmenu-4

<div class="tab-menu">
    <input id="tab-1" name="tab" type="radio" checked>
    <label class="tab-menu-item" for="tab-1">タブ1</label>
    <div class="tab-menu-contents">
        タブ1が選択されました。
    </div>

    <input id="tab-2" name="tab" type="radio">
    <label class="tab-menu-item" for="tab-2">タブ2</label>
    <div class="tab-menu-contents">
        タブ2が選択されました。
    </div>

    <input id="tab-3" name="tab" type="radio">
    <label class="tab-menu-item" for="tab-3">タブ3</label>
    <div class="tab-menu-contents">
        タブ3が選択されました。
    </div>
</div>

.tab-menu {
    --tag-item-checked-color: #5555ff;
    --tab-menu-item-height: 50px;
    display: flex;
    flex-wrap: wrap;
}

.tab-menu > input {
    display: none;
}

.tab-menu .tab-menu-item {
    align-items: center;
    border-radius: 15px 15px 0px 0px;
    border: 1px solid #aaa;
    border-bottom: none;
    display: flex;
    flex: 1;
    height: var(--tab-menu-item-height);
    justify-content: center;
    order: -1;
}

.tab-menu .tab-menu-item:hover {
    background-color: #ddd;
}

.tab-menu > input:checked + .tab-menu-item {
    background-color: var(--tag-item-checked-color);
    border-color: var(--tag-item-checked-color);
    background-color: var(--tag-item-checked-color);
    color: #fff;
}

.tab-menu .tab-menu-contents {
    display: none;
    height: 300px;
    border: 1px solid #aaa;
    border-top: 3px solid var(--tag-item-checked-color);
    width: 100%;
}

.tab-menu > input:checked + .tab-menu-item + .tab-menu-contents {
    display: block;
}

This Pen is owned by プログラマのひまつぶし on CodePen.

See more by @erpmiwmy-the-sans on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.