cssだけでタブの切り替えのデザイン(codepenサンプル)

<div class="tab-wrap">
    <input id="tab-a" type="radio" name="tab" class="tab-switch" checked="checked" />
    <input id="tab-b" type="radio" name="tab" class="tab-switch" />

    <div class="tab-item-wrap">
        <label class="tab-label tab-label-a" for="tab-a">タブa</label>
        <label class="tab-label tab-label-b" for="tab-b">タブb</label>
    </div>

    <div class="tab-content tab-content-a">
        <div class="tab-content-layout">
          aです。
        </div>
    </div>
    <div class="tab-content tab-content-b">
        <div class="tab-content-layout">
          ｂです。
        </div>
    </div>
</div>

.tab-wrap {
  position: relative;
  display: flex;
}

.tab-item-wrap {
  display: flex;
  flex: 1;
}

.tab-label {
  display: inline-block;
  flex: 1;
  height: 100px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  background: #bfbfbf;
  border-radius: 24px 24px 0 0;
}

.tab-content {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  min-height: 100px;
  background-color: #bfbfbf;
  border-radius: 24px;
  opacity: 0;
}

.tab-content-layout {
  margin: 10px;
}

#tab-a:checked ~ .tab-item-wrap .tab-label-a,
#tab-b:checked ~ .tab-item-wrap .tab-label-b {
  background-color: #aab828;
}

#tab-a:checked ~ .tab-content-a,
#tab-b:checked ~ .tab-content-b {
  background-color: #aab828;
  opacity: 1;
}

.tab-switch {
  display: none;
}