JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/tabbable/src/tabbable.js"></script>
<div class="tabbable">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#" data-tab-name="tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#" data-tab-name="tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" data-tab-name="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" data-tab-name="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

<hr />

<div class="tabbable tabs-below">
  <div class="tab-content">
    <div class="tab-pane active" data-tab-name="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" data-tab-name="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#" data-tab-name="tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#" data-tab-name="tab2" data-toggle="tab">Section 2</a></li>
  </ul>
</div>

<hr />

<div class="tabbable tabs-left">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#" data-tab-name="tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#" data-tab-name="tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" data-tab-name="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" data-tab-name="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

<hr />

<div class="tabbable tabs-right">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#"...

JavaScript

$(function() {

	var tabbableController = {
		__name: 'TabbableController',

		__ready: function() {
		},

		'.nav-tabs a click': function(context) {
			context.event.preventDefault();
			var cur = $(context.event.currentTarget);
			var tabName = cur.attr('data-tab-name');
			var target = this.$find('[data-tab-name="' + tabName + '"]');
			this.$find('.nav-tabs > *').removeClass('active');
			cur.closest('.nav-tabs > *').addClass('active');
			this.$find('.tab-pane').removeClass('active');
			this.$find('.tab-pane').filter(target).addClass('active');
		}
	};
	$('.tabbable').each(function() {
		h5.core.controller(this, tabbableController);
	});


});