.tab-switch {
    display: flex; 
    flex-wrap: wrap; 
    margin: auto;
    justify-content: center;
    gap: 5px;
}

.tab-switch > label {
    flex: 1 1 auto; 
    order: -1; 
    position: relative; 
    padding: .7em 1em; 
    background-color: #f2f3f4; /* background color */
    color: #000; /* font color */
    text-align: center;
    cursor: pointer; 
    transition:.3s all;
}
.tab-switch > label:hover,
.tab-switch label:has(:checked) {
    background-color: #006699; /* background color: hover */
    color: #fff; /* font color: hover */
}

.tab-switch input {
    display: none; 
}

.tab-switch > div {
    display: none; 
    width: 100%; 
    padding: 1.5em 1em;
}

.tab-switch label:has(:checked) + div {
    display: block;
}