JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs-menu">
  <div id="tab-menu-a">タブa</div>
  <div id="tab-menu-b">タブb</div>
  <div id="tab-menu-c">タブc</div>
</div>
<div class="tabs-content">
  <div id="tabs-a">
    <p>タブaの内容が入ります。</p>
  </div>
  <div id="tabs-b">
    <p>タブbの内容が入ります。</p>
  </div>
  <div id="tabs-c">
    <p>タブcの内容が入ります。</p>
  </div>
</div>

CSS

/* ページ全体での文字色の設定 */
body {
  color: #3f4548;
}

/* divのデフォルトスタイルを消去 */
.tabs-menu {
  margin: 0;
  padding: 0;
}

/* タブの基本スタイル */
.tabs-menu div {
  display: block;
  float: left;
  padding: 10px 20px;
  margin-right: 8px;
  margin-bottom: -1px;
  border-style: solid;
  border-width: 1px;
  border-color: transparent;
  border-radius: 4px 4px 0 0;
  color: #557f95;
  text-decoration: none;
  cursor: pointer;
  /* 各プロパティをふわっと変える演出 */
  transition: all 0.15s;
}

/* 非選択のタブにマウスカーソルを乗せたら色を変える（追記してください） */
.tabs-menu div:not(.active):hover {
  border-color: #f0f0f0 #f0f0f0 #999;
  background-color: #f0f0f0;
}

/* 選択中のタブ */
.tabs-menu .active {
  color: #3f4548;
  border-color: #999 #999 transparent #999;
  background-color: #fff;
}

/* タブコンテンツ表示エリア */
.tabs-content {
  clear: both;
  border: 1px solid #999;
  border-radius: 0 4px 4px 4px;
  padding: 10px;
}

/* 各タブのコンテンツはデフォルトで非表示 */
.tabs-content > div {
  display: none;
}

JavaScript

const showTab = (selector) => {
  // 引数selectorの中身をコンソールで確認する
  console.log(selector);

  // TIPS: 同じ個所を操作する実装はなるべく固めよう
  // tab-menuの操作をまとめる。分散させると全体に神経を使うので疲れる。
  $(".tabs-menu > div").removeClass("active");
  $('.tabs-menu div[id="' + selector + '"]').addClass('active');

  // 同様にtabsの操作をまとめる
  $(".tabs-content > div").hide();
  $('.tabs-content div[id="tabs-' + selector.slice(-1) + '"]').show();

  // なぜtabs-menuは動的にselector変数で処理しているのにtabsはifなのか？
  // 同じように実装した方が統一感があってキレイだ
  // if (selector === "tab-menu-a") {
  //   $("#tabs-a").show();
  // }
  // else if (selector === "tab-menu-b") {
  //   $("#tabs-b").show();
  // }
  // else if (selector === "tab-menu-c") {
  //   $("#tab-c").show();
  // }

  // TIPS: 無駄なコードは書かない
  // これの有無で動作に違いはない。大体hide()している箇所ないし
  // $("#" + selector).show();
};

// タブがクリックされたらコンテンツを表示
$(".tabs-menu div").on("click", (e) => {
  const selector = $(e.target).attr('id');
  showTab(selector);
});

// 初期状態として1番目のタブを表示
showTab('tab-menu-a');