JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
  <ul>
    <li><a class="active" href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li> 
    <li><a href="#tab4">Tab 4</a></li> 
    <li><a href="#tab5">Tab 5</a></li> 
    <li><a href="#tab6">Tab 6</a></li>     
  </ul>
   <ul>
    <li><a href="#tab7">Tab 7</a></li>
    <li><a href="#tab8">Tab 8</a></li>
    <li><a href="#tab9">Tab 9</a></li> 
    <li><a href="#tab10">Tab 10</a></li> 
    <li><a href="#tab11">Tab 11</a></li> 
    <li><a href="#tab12">Tab 12</a></li>     
  </ul>
</nav>


<header>

  <section id="tab1">
      This is the content to be displayed in TAB ONE!<br/>
    This is another line just for testing its flexibility!
    <a href="#tab2">Next</a>
  </section>

  <section id="tab2">
    This is the content to be displayed in TAB TWO!
    <a href="#tab3">Next</a>
  </section>

  <section id="tab3">
    This is the content to be displayed in TAB THREE!
    <a href="#tab4">Next</a>
  </section>
  
  <section id="tab4">
      This is the content to be displayed in TAB FOUR!<br/>
    This is another line just for testing its flexibility!
    <a href="#tab5">Next</a>
  </section>

  <section id="tab5">
    This is the content to be displayed in TAB FIVE!
    <a href="#tab6">Next</a>
  </section>

  <section id="tab6">
    This is the content to be displayed in TAB SIX!
  </section>
  
</header>

CSS

.active{
  background-color: lightgrey;
}

JavaScript

$(document).ready(function() {
	
	//First we make sure to only show the first section
$('header').children('section').hide();
$('header').children('section').first().show();

//When we click a link do this..
$('nav ul li a').click(function(e){
    e.preventDefault();
    //Makes sure the active tab gets a different color
    $('nav ul li a').removeClass('active');
    $(this).addClass('active');
  
    //we pull out the href E.g #tab2
    var href = $(this).attr('href');
  
    //We slide up all sections and only reveal the one we clicked E.g #tab2
    $('header').children('section').slideUp(200);
    $(href).delay(200).slideDown(200);
  
});


// TRYING TO GET THE CURRENT TAB TO HIGHLIGHT WHEN I CLICK 'Next'
$('section a').click(function(e){
    e.preventDefault();
    $('.active').removeClass('active').parent().next().children().first().addClass('active');
    
    var href = $(this).attr('href');
    
    $('header').children('section').slideUp(200);
    
    $(href).delay(200).slideDown(200);
	
});
});