JSFiddle - React, Tailwind, and code Playground

by takumi091111

HTML

<div class="c-tabs">
  <input class="c-tab__input" name="tabs" id="a" type="radio">
  <label class="c-tab__label" for="a">タブA</label>
  <div class="c-tab__content">
    <p>タブコンテンツA</p>
    <p>タブコンテンツA</p>
  </div>

  <input class="c-tab__input" name="tabs" id="b" type="radio">
  <label class="c-tab__label" for="b">タブB</label>
  <div class="c-tab__content">
    <p>タブコンテンツB</p>
  </div>
</div>

SCSS

.c-tabs {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: 40px auto;
}

.c-tab {
  &__input {
    position: absolute;
    display: none;
  }
  &__input:checked {
    & + .c-tab__label + .c-tab__content {
      display: block;
    }
  }
  &__label {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E5E5E5;
    border-radius: 8px 8px 0 0;
  }
  &__content {
    display: none;
    grid-column: 1/-1;
    grid-row: 1/2;
    order: 99;
    width: 100%;
    background-color: #EFEFEF;
  }
}