CSSで作るタブ切り替えメニュー

<div class="tabs-horizontal">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1">Tab 1</label>
  <input type="radio" id="tab2" name="tab">
  <label for="tab2">Tab 2</label>
  <div class="content" id="content1">This is the content for Tab 1.</div>
  <div class="content" id="content2">This is the content for Tab 2.</div>
</div>

/* タブ全体のスタイル */
.tabs-horizontal {
  margin: 0 auto;
}

/* 横並びのタブ */
.tabs-horizontal label {
  display: inline-block;
  width: 50%; /* 各タブを均等に */
  padding: 10px 20px;
  text-align: center;
  cursor: pointer;
  background: #f0f0f0;
  border: 2px solid #ddd;
  font-weight: bold;
  transition: background 0.3s;
  border-radius: 5px 5px 0px 0px;
  padding: 10px 20px 10px 20px !important;
  border-bottom: initial;
}

/* ラジオボタンを非表示 */
.tabs-horizontal input[type="radio"] {
  display: none;
}

/* 選択されたタブのスタイル */
.tabs-horizontal input[type="radio"]:checked + label {
  background: #cf5f5f;
  border: 2px solid #cf5f5f;
  border-bottom: initial;
}

/* コンテンツのデフォルトは非表示 */
.tabs-horizontal .content {
  display: none;
  padding: 20px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-top: none;
}

/* 選択されたタブに対応するコンテンツを表示 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}