JSFiddle - React, Tailwind, and code Playground

BROKEN

by Alessandro_Maselli

HTML

<html>
<body>
<h2 class="nav-tab-wrapper">
<a href="#tab-1" class="nav-tab nav-tab-active">First</a>
<a href="#tab-2" class="nav-tab">Second</a>
<a href="#tab-3" class="nav-tab">Third</a>
</h2>
<hr />
<section id="tab-1" class="tab-content active">
  <P>Some content here.</P>
</section>
<section id="tab-2" class="tab-content hidden">
  <p>Some more here.</p>
</section>
<section id="tab-3" class="tab-content hidden">
  <p>Something else here.</p>
</section>
</body>

CSS

body {
  background-color: #fff;
}

p {
  display: block;
}

hr {
  padding-bottom: 20px;
}

.nav-tab {
  display: inline-block;
  float: left;
  width: 100px;
  font-size: 16px;
  color: #000;
  padding-left: 8px;
  border: 1px solid #000;
}

.nav-tab-active {
  color: #f00;
}

.tab-content.active {
    display: block;
}

.tab-content.hidden {
    display: none;
}

JavaScript

(function( $ ) {
	$('h2.nav-tab-wrapper > a').click(function(event) {
  	// Clicked anchor: prevent browser from taking action.
    event.preventDefault();
    
    // jQuery selector to display tab content.
    var active_tab_selector = $('h2.nav-tab-wrapper > a').attr('href');
    
    // Find activated navigation and remove '.active'.
    var activated_nav = $('h2.nav-tab-wrapper > a.nav-tab-active');
    activated_nav.removeClass('nav-tab-active');
    
    // Add '.active' to the clicked navigation.
    $(this).parents('a').addClass('nav-tab-active');
    
    // Hide displayed tab content.
    $(active_tab_selector).removeClass('active');
    $(active_tab_selector).addClass('hidden');
    
    // Show target tab content.
    var target_tab_selector = $(this).attr('href');
    $(target_tab_selector).removeClass('hidden');
    $(target_tab_selector).addClass('active');
  });
})( jQuery );