<input type="radio" name="tabs" id="tab1" data-title="Tab 1" checked/>
<input type="radio" name="tabs" id="tab2" data-title="Tab 2"/>
<input type="radio" name="tabs" id="tab3" data-title="Tab 3"/>
<div id="tabpanel1" class="panel">Panel 1</div>
<div id="tabpanel2" class="panel">Panel 2</div>
<div id="tabpanel3" class="panel">Panel 3</div>

body {
    overflow: hidden;
}

:root {
    --selected-tab: 1;
    --panel-width: 300px;
}

:root:has(#tab1:checked) {
    --selected-tab: 1;
}

:root:has(#tab2:checked) {
    --selected-tab: 2;
}

:root:has(#tab3:checked) {
    --selected-tab: 3;
}

.panel {
    position: absolute;
    top: 30px;
    left: 0;
    width: var(--panel-width);
    bottom: 0;
    border: solid 1px black;
    padding: 10px;
  
    visibility: hidden;
    animation: 1s tab-is-selected paused;
}

@supports not selector(:has(a, b)) {
    .panel::after {
        position: relative;
        display: inline-block;
        top: 2rem;
        text-align: center;
        width: var(--panel-width);
        content: "Selector :has not supported on this browser!\A Cannot implement tab switching"
    }
}

@keyframes tab-is-selected {
    from {
        visibility: visible;
    }
}

#tabpanel1 {
    animation-delay: calc((1 - var(--selected-tab)) * 1s);
}

#tabpanel2 {
    animation-delay: calc((2 - var(--selected-tab)) * 1s);
}

#tabpanel3 {
    animation-delay: calc((3 - var(--selected-tab)) * 1s);
}

input[type=radio] {
    appearance: none;
}

input[type=radio]:not(:checked) {
    cursor: pointer;
}

input[type=radio]::after {
    border: solid 1px black;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 4px;
    content: attr(data-title);
}

input[type=radio]:not(:checked)::after {
    background-color: #CCC;
}