JSFiddle - React, Tailwind, and code Playground

by yourbudweiser

HTML

<section class="tabs">
  <ul class="tabs-nav">
    <li><a href="#tab11" rel="nofollow">Tab 1</a></li>
    <li><a href="#tab12" rel="nofollow">Tab 2</a></li>
  </ul>
  <div class="tabs-stage">
    <div id="tab11" class="tab-content">
      <h3>Tab 1 Content</h3>
    </div>
    <div id="tab12" class="tab-content">
      <h3>Tab 2 Content</h3>
    </div>
  </div>
</section>

<section class="tabs">
  <ul class="tabs-nav">
    <li><a href="#tab21" rel="nofollow">Tab 1</a></li>
    <li><a href="#tab22" rel="nofollow">Tab 2</a></li>
  </ul>
  <div class="tabs-stage">
    <div id="tab21" class="tab-content">
      <h3>Tab 1 Content</h3>
    </div>
    <div id="tab22" class="tab-content">
      <h3>Tab 2 Content</h3>
    </div>
  </div>
</section>

CSS

.tabs-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tabs-nav a {
    border-bottom: 5px #a6a6a6 solid;
    color: #a6a6a6;
    display: block;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 40px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
}

.tabs-nav .tab-active a {
    border-bottom-color: #000;
    color: var(--body-color);
    cursor: default;
    z-index: 1;
}

.tabs-nav li {
    float: left;
}

.tabs-stage {
    background-color: #fff;
    border-radius: 0 0 6px 6px;
    border-top: 5px #a6a6a6 solid;
    clear: both;
    margin-bottom: 20px;
    padding: 10px 20px 20px;
    position: relative;
    top: -5px;
    width: 100%;
}

JavaScript

// Change tab class and display content
$('.tabs-nav a').on('click', function (event) {
    event.preventDefault();

    $('.tab-active').removeClass('tab-active');
    $(this).parent().addClass('tab-active');
    
    $('.tabs-stage .tab-content').hide();
    $($(this).attr('href')).show();
});

$('.tabs-nav a:first').trigger('click'); // Default