.tabs { position: relative; max-width: 72ch; min-height: 200px; } .tab { float: left; } .tab > label { cursor: pointer; padding: 1rem 1.5em; } .tab [type=radio] { clip: rect(0, 0, 0, 0); height: 0; overflow: hidden; position: absolute; width: 0; } .tab [type=radio] + label { outline: 2px solid var(--bgcolor-accent); outline-offset: -1px; } /* .tab [type=radio]:focus + label { outline: 2px dotted black; } */ .tab [type=radio]:checked ~ label { background-color: var(--bgcolor-accent); color: var(--color-accent); z-index: 2; } .tab [type=radio]:checked ~ label ~ .content { opacity: 1; z-index: 1; } .tab .content { bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 10rem; }