.tabBtn {
    display: flex;
    list-style: none;
    width: 100%;
    margin: 0 0 1px;
    padding: 0;
    text-align: center;
}
.tabBtn li {
    flex-basis: 20%;
    background: lightseagreen;
}
.tabBtn li:not(:last-child) {
    border-right: 1px solid white;
}
.tabBtn label {
    display: block;
    cursor: pointer;
    padding: 10px 0;
    color: white;
    transition: background .3s;
}
.tabBtn label:hover {
    background: rgba(205,92,92,.5);
}

  /* :::::: contents :::::: */
.tabContents section {
    padding: 8px;
    background: white;
}

  /* :::::: mechanism :::::: */
.tabContents section {
    opacity: .1;
}
.tabContents section {
    transition: opacity .3s;
}
#tab-1:checked ~ .tabBtn label[for="tab-1"],
#tab-2:checked ~ .tabBtn label[for="tab-2"],
#tab-3:checked ~ .tabBtn label[for="tab-3"]{
    background: indianred;
}

#tab-1:checked ~ .tabContents #section-1,
#tab-2:checked ~ .tabContents #section-2,
#tab-3:checked ~ .tabContents #section-3{
    opacity: 1;
    background: white;
}