.tabs {
    overflow: hidden;
}
.tabs .tab {
    width: 100%;
    overflow: hidden;
}

/* tab trigger */
.tabs .tab [type=checkbox],
.tabs .tab [type=radio] {
    box-sizing: border-box;
    padding: 0;
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.tabs .tab input:checked + .tab-label::after {
    transform: rotate(90deg);
}

/* tab label  */
.tabs .tab .tab-label {
    display: flex;
    justify-content: space-between;
    padding: 1em;
    cursor: pointer;
}
.tabs .tab .tab-label::after {
    content: "❯";
    width: 1em;
    height: 1em;
    text-align: center;
    transition: all 0.35s;
}

/* tab content */
.tabs .tab .tab-content {
    max-height: 0;
    padding: 0 1em;
    transition: all 0.35s;
}
.tabs .tab input:checked ~ .tab-content {
    max-height: 100vh;
    padding: 1em;
}