JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <div class="sec-main">
    <h1>自己紹介リスト</h1>
    <div class="sec-tab">
      <ul class="mod-tabList">
        <li class="tab isSelected">Yusuke Saitoh</li>
        <li class="tab">Yusuke Saitoh</li>
      </ul>
      <ul class="mod-contentList">
        <li class="mod-content isSelected">
          <h2 class="name">Yusuke Saitoh</h2>
          <h3 class="summary">自称名人の3年目Webエンジニア</h3>
          <p class="detail">
     <span>◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯◯</span>
          </p>
          <div class="img">
            <img src="https://publicdomainq.net/images/201809/12s/publicdomainq-0026214hze.jpg" alt="自己紹介画像">
          </div>
        </li>
        <li class="mod-content">
          <h2 class="name">Tomoki Hanaoka</h2>
          <h3 class="summary">自称名人の3年目Webエンジニア</h3>
          <p class="detail">
            <span>konnnichiha</span>
          </p>
          <div class="img">
            <img src="https://publicdomainq.net/images/201809/12s/publicdomainq-0026214hze.jpg" alt="自己紹介画像">
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

CSS

body {
  font-size: 14px;
  color: #333;
  -webkit-font-smoothing: antialiased;
  font-family: 'Helvetica Neue', Helvetica, Arial, '游ゴシック', 'YuGothic',
    'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo',
    sans-serif;
  letter-spacing: 0.06em;
}

li {
  list-style: none;
}

ul {
  padding: 0;
  margin: 0;
}

.is-hide {
  display: none;
}

.sec-main {
  width: 940px;
  margin: 0 auto;
}

.sec-tab {}

.sec-tab .mod-tabList {
  display: flex;
  margin-bottom: -1px;
}

.sec-tab .mod-tabList .tab {
  border: 1px solid #ccc;
  padding: 20px;
  box-sizing: border-box;
  background-color: #f4f4f4;
  border-radius: 4px 4px 0 0;
}

.sec-tab .mod-tabList .tab.isSelected {
  border-bottom: 1px solid #fff;
  background-color: #fff;
}

.sec-tab .mod-contentList {
  border: 1px solid #ccc;
}

.sec-tab .mod-contentList .mod-content {
  padding: 20px;
  display: none;
}
.sec-tab .mod-contentList .mod-content.isSelected {
  display: block;
}

.sec-tab .mod-contentList .mod-content .detail {
  word-break: break-all;
}

.sec-tab .mod-contentList .mod-content .img {
  text-align: center;
}

.sec-tab .mod-contentList .mod-content .img img {
  width: 500px;
}

JavaScript

$('.mod-tabList .tab').click(function() {
	// クリックしたタブの順番をindexに格納
  var index = $('.mod-tabList .tab').index(this);
  
  // タブ切替
  // 全タブからisSelectedを削除
	$('.mod-tabList .tab').removeClass('isSelected');
  
  // クリックしたタブにisSelectedを付与
  $(this).addClass('isSelected');
  
  // コンテンツ切替
  // (css)コンテンツにもisSelectedで管理するようにしました is-hideはやめた
  // (jq)isSelectedを一度全部から削除して、クリックされたタブと同じ順番のコンテンツにisSelectedを付与
  $('.mod-content').removeClass('isSelected').eq(index).addClass('isSelected');
})