<fieldset class="tabslayout">
  <legend>Tabs Group</legend>
  <input type="radio" name="tabsgroup" id="tabsgroup--1" checked />
  <label for="tabsgroup--1">Tab 1</label>
  <div class="tab-content">
    This is the first tab.
  </div>
  <input type="radio" name="tabsgroup" id="tabsgroup--2" />
  <label for="tabsgroup--2">Tab 2</label>
  <div class="tab-content">
    This is the second tab.<br />
    It has a line break and a <a href="#">link</a>
  </div>
  <input type="radio" name="tabsgroup" id="tabsgroup--3" />
  <label for="tabsgroup--3">Tab 3</label>
  <div class="tab-content">
    This is the third tab. It has a <a href="#">link</a>
  </div>
  <input type="radio" name="tabsgroup" id="tabsgroup--4" />
  <label for="tabsgroup--4">Tab 4</label>
  <div class="tab-content">
    This is the fourth tab.</a>
  </div>
</fieldset>

.tabslayout {
  display: grid;
  padding: 0;
  overflow: auto hidden;
  border: none;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  > legend {
    display: none;
  }
  > input[type="radio"] {
    overflow: hidden;
    opacity: 0;
    position: absolute;
  }
  > label {
    grid-row: 2;
    border: 1px solid #a0a0a0;
    background: #e8e8c0;
    padding: 2px 5px;
    text-align: center;
    &~ label {
      border-left-width: 0px;
    }
    &:first-of-type {
      border-top-left-radius: 5px 3px;
    }
    &:last-of-type {
      border-top-right-radius: 5px 3px;
    }
  }
  > input[type="radio"]:checked + label {
    border-bottom-style: none;
    background: white;
    outline-offset: -5px;
  }
  > input[type="radio"]:focus + label {
    outline: 1px dotted;
  }
  > .tab-content {
    order: 1;
    overflow: hidden;
    grid-row: 4;
    grid-column: 1 / -1;
    position: sticky;
    left: 0;
    border: 1px solid #a0a0a0;
    border-top-style: none;
    background: white;
    padding: 0 5px 3px;
    border-radius: 0 0 5px 5px / 0 0 3px 3px;
    
    &~ .tab-content {
      break-before: unset;
    }
  }
  > input[type="radio"]:checked ~ .tab-content {
    z-index: 1;
  }
  > input[type="radio"]:checked ~ .tab-content ~ .tab-content {
    z-index: 0;
  }
  &::after {
    grid-row: 3;
    grid-column: 1 / -1;
    content: "";
    display: block;
    border-top: 1px solid #a0a0a0;
    margin-top: -1px;
    z-index: -1;
  }
}

for (let radio_el of document.querySelectorAll(".tabslayout > input[type=radio]")) {
  for (let el of radio_el.parentElement.querySelectorAll(
    `#${radio_el.id} ~ .tab-content`
  )) {
    el.addEventListener("focusin", evt => {
      radio_el.checked = true;
    });
  }
}