JSFiddle - React, Tailwind, and code Playground

HTML

<!-- left side bar -->
<div class="wrap">
  <div class="flex-container">
    <div class="overview-flexbox-mid">
      <div id="leftPanel">
        <ul class="nav nav-tabs navbar-light bg-light" id="leftTabs">
          <li class="nav-item nav-link current" data-tab="tab-1"><i class="fa fa-compress" aria-hidden="true"></i> Subject1
          </li>
          <li class="nav-item nav-link" data-tab="tab-2"><i class="fa fa-book" aria-hidden="true"></i> Subject2
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div id="tab-1" class="tab-content current">
    <div class="flex-container-horizontal" id="leftPanelContent1">
      <h1>Some text</h1>
    </div>
  </div>

  <!-- left side content -->
  <div id="tab-2" class="tab-content">
    <h1>More text</h1>
  </div>
</div>
<div class="wrap">
  <!-- right side bar -->

  <div class="overview-flexbox-mid">
    <div id="rightPanel">

      <ul class="cor nav nav-tabs navbar-light bg-light" id="rightTabs">
        <li class="nav-item nav-link current" data-tab="tab-5"><i class="fa fa-bar-chart" aria-hidden="true"></i> Subject3
        </li>
        <li class="nav-item nav-link" data-tab="tab-6"><i class="fa fa-signal" aria-hidden="true"></i> Subject4
        </li>
      </ul>
    </div>
  </div>

  <!--right side content-->

  <div id="tab-5" class="tab-content current">
    <div class="flex-container-horizontal">
      <h1>Content1</h1>
    </div>
  </div>
  <div id="tab-6" class="tab-content">
    <h1>Content2</h1>
  </div>
</div>

CSS

ul.nav li {
  list-style-type: none;
  display: inline;
  overflow: hidden;
  padding: 3px 15px;
  cursor: pointer;
}

.tab-content {
  display: none;
  background: white;
  padding: 15px;
}

.tab-content.current {
  display: inherit;
}

.navbar-light {
  border-left-color: black;
}

.nav,
.tabs {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.bg-light {
  background-color: #f8f9fa !important;
}

.nav-tabs {
  border-bottom: 1px solid #ddd;
}

.nav-item.nav-link.current,
.nav-item.nav-link.active {
  background-color: #ffffff;
  color: black;
}

.nav-item.nav-link {
  background-color: #7E7E7F;
  color: #ffffff;
  margin-left: 0.1rem;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.current,
.nav-tabs .nav-link.active {
  border-color: #ddd #ddd #fff;
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.nav-tabs .nav-item {
  margin-bottom: -1px;
}

.nav-item.nav-link:hover {
  background-color: #3F3F40 !important;
  color: #ffffff;
}

JavaScript

$('.nav li').click(function() {
  var tab_id = $(this).attr('data-tab');
    $(this).closest('.wrap').find('ul.nav li').removeClass('current');
  $(this).closest('.wrap').find('.tab-content').removeClass('current');
  $(this).addClass('current');
  $("#" + tab_id).addClass('current');

})