.tabs { margin-top: 4rem; } .tabs .tab-content { display: none; } #feed:checked ~ .tabs .tab-content:nth-child(1), #trending:checked ~ .tabs .tab-content:nth-child(2), #direct:checked ~ .tabs .tab-content:nth-child(3), #chat:checked ~ .tabs .tab-content:nth-child(4), #settings:checked ~ .tabs .tab-content:nth-child(5) { display: block; } input[type="radio"].tab { clip: rect(0, 0, 0, 0); height: 0; overflow: hidden; position: absolute; width: 0; } .tab + label { border: none; color: var(--color); display: inline-block; outline: 2px solid var(--bgcolor-accent); padding: 1rem 1.5em; position: relative; top: 1px; } input[type="radio"]:checked + label { background: var(--bgcolor-accent); } .tab:focus + label, .tab:active + label { border-color: var(--focus-border-color); border-radius: var(--focus-border-radius); outline: var(--focus-outline); outline-offset: var(--focus-outline-offset); } .tab-content { max-width: 96ch; min-height: 200px; } /* .tab { float: left; } .tab > label { } */