<div class="__tabs" style="--has-nth-child: 4;">
  <input id="tab-1-1" type="radio" name="tab-1" class="__tabs_radio" checked="checked" />
  <label for="tab-1-1" class="__tabs_tab">Tab1</label>
  <div class="__tabs_tabpanel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <input id="tab-1-2" type="radio" name="tab-1" class="__tabs_radio" />
  <label for="tab-1-2" class="__tabs_tab">Tab2</label>
  <div class="__tabs_tabpanel">
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <input id="tab-1-3" type="radio" name="tab-1" class="__tabs_radio" />
  <label for="tab-1-3" class="__tabs_tab">Tab3</label>
  <div class="__tabs_tabpanel">
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <input id="tab-1-4" type="radio" name="tab-1" class="__tabs_radio" />
  <label for="tab-1-4" class="__tabs_tab">Tab4</label>
  <div class="__tabs_tabpanel">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

<div class="__tabs vertical" style="--has-nth-child: 4;">
  <input id="tab-2-1" type="radio" name="tab-2" class="__tabs_radio" checked="checked" />
  <label for="tab-2-1" class="__tabs_tab">Tab1</label>
  <div class="__tabs_tabpanel">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <input id="tab-2-2" type="radio" name="tab-2" class="__tabs_radio" />
  <label for="tab-2-2" class="__tabs_tab">Tab2</label>
  <div class="__tabs_tabpanel">
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <input id="tab-2-3" type="radio" name="tab-2" class="__tabs_radio" />
  <label for="tab-2-3" class="__tabs_tab">Tab3</label>
  <div class="__tabs_tabpanel">
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
  <input id="tab-2-4" type="radio" name="tab-2" class="__tabs_radio" />
  <label for="tab-2-4" class="__tabs_tab">Tab4</label>
  <div class="__tabs_tabpanel">
    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

*,
::before,
::after {
  box-sizing: border-box;
}

.__tabs {
  --has-nth-child: 6;
  display: grid;
  grid: none / repeat(var(--has-nth-child), 1fr);
  gap: 2em 2px;
  overflow: hidden;
  padding-inline: 1em;
}
* + .__tabs {
  margin-block-start: 4em;
}
.__tabs_radio {
  clip-path: inset(50%);
  position: fixed;
  inset-block-start: 0;
}
.__tabs_tab {
  border: solid 1px;
  border-block-end: none;
  cursor: pointer;
  display: block;
  grid-row: 1;
  grid-column: auto;
  padding: 1em;
  position: relative;
  text-align: center;
}
.__tabs_radio:focus + .__tabs_tab {
  text-decoration: underline;
}
.__tabs_radio:is(:focus, :checked) + .__tabs_tab::after {
  block-size: 1px;
  border-inline: solid 10000px;
  content: "";
  pointer-events: none;
  position: absolute;
  inset-block: auto 0;
  inset-inline: -10000px;
}
.__tabs_tabpanel {
  grid-row: 2;
  grid-column: 1 / span var(--has-nth-child);
}
.__tabs_tabpanel > * {
  margin: 0;
}
.__tabs_tabpanel > * + * {
  margin-block-start: 1em;
}
.__tabs_radio:not(:focus, :checked) + * + .__tabs_tabpanel {
  visibility: hidden;
}

.__tabs.vertical {
  grid: repeat(var(--has-nth-child), auto) 1fr / min(8em, 25%) 1fr;
  gap: 2px 2em;
  padding: 0;
  padding-block: 1em;
}
.__tabs.vertical > .__tabs_tab {
  border: solid 1px;
  border-inline-end: none;
  grid-row: auto;
  grid-column: 1;
  text-align: start;
}
.__tabs.vertical > .__tabs_radio:is(:focus, :checked) + .__tabs_tab::after {
  block-size: auto;
  inline-size: 1px;
  border-block: solid 10000px;
  border-inline: none;
  inset-block: -10000px;
  inset-inline: auto 0;
}
.__tabs.vertical > .__tabs_tabpanel {
  grid-row: 1 / span calc(var(--has-nth-child) + 1);
  grid-column: 2;
}