JSFiddle - React, Tailwind, and code Playground

by Rob Rothe

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<!-- Nav tabs -->
<ul class="nav nav-tabs responsive-tabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#t1" role="tab">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#t2" role="tab">Tab 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#t3" role="tab">Tab 3</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="container">
  <div class="tab-content">
    <div class="tab-pane active" id="t1" role="tabpanel">
      <h4>
    Tab 1
    </h4></div>
    <div class="tab-pane" id="t2" role="tabpanel">
      <h4>
    Tab 2
    </h4>
    </div>
    <div class="tab-pane" id="t3" role="tabpanel">
      <h4>
    Tab 4
    </h4>
    </div>
  </div>
</div>

CSS

/*
 * jQuery Bootstrap Responsive Tabs v2.0.1 | Valeriu Timbuc - vtimbuc.com
 * github.com/vtimbuc/bootstrap-responsive-tabs
 * @license WTFPL http://www.wtfpl.net/about/
 */

.responsive-tabs-container .tab-pane {
  margin-bottom: 15px;
}

.responsive-tabs-container .accordion-link {
  display: none;
  margin-bottom: 10px;
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-radius: 3px;
  border: 1px solid #ddd;
  color: #333;
}

@media (max-width: 767px) {
  .responsive-tabs-container.accordion-xs .nav-tabs {
    display: none;
  }
  .responsive-tabs-container.accordion-xs .accordion-link {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .responsive-tabs-container.accordion-sm .nav-tabs {
    display: none;
  }
  .responsive-tabs-container.accordion-sm .accordion-link {
    display: block;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .responsive-tabs-container.accordion-md .nav-tabs {
    display: none;
  }
  .responsive-tabs-container.accordion-md .accordion-link {
    display: block;
  }
}

@media (min-width: 1200px) {
  .responsive-tabs-container.accordion-lg .nav-tabs {
    display: none;
  }
  .responsive-tabs-container.accordion-lg .accordion-link {
    display: block;
  }
}

JavaScript

$(document).ready(function() {
  $('.responsive-tabs').responsiveTabs({
    accordionOn: ['lg']
  });
});

/*
 * jQuery Bootstrap Responsive Tabs v2.0.1 | Valeriu Timbuc - vtimbuc.com
 * github.com/vtimbuc/bootstrap-responsive-tabs
 * @license WTFPL http://www.wtfpl.net/about/
 */
! function($) {
  "use strict";
  var a = {
    accordionOn: ["xs"]
  };
  $.fn.responsiveTabs = function(e) {
    var t = $.extend({}, a, e),
      s = "";
    return $.each(t.accordionOn, function(a, e) {
      s += " accordion-" + e
    }), this.each(function() {
      var a = $(this),
        e = a.find("> li > a"),
        t = $(e.first().attr("href")).parent(".tab-content"),
        i = t.children(".tab-pane");
      a.add(t).wrapAll('<div class="responsive-tabs-container" />');
      var n = a.parent(".responsive-tabs-container");
      n.addClass(s), e.each(function(a) {
        var t = $(this),
          s = t.attr("href"),
          i = "",
          n = "",
          r = "";
        t.parent("li").hasClass("active") && (i = " active"), 0 === a && (n = " first"), a === e.length - 1 && (r = " last"), t.clone(!1).addClass("accordion-link" + i + n + r).insertBefore(s)
      });
      var r = t.children(".accordion-link");
      e.on("click", function(a) {
        a.preventDefault();
        var e = $(this),
          s = e.parent("li"),
          n = s.siblings("li"),
          c = e.attr("href"),
          l = t.children('a[href="' + c + '"]');
        s.hasClass("active") || (s.addClass("active"), n.removeClass("active"), i.removeClass("active"), $(c).addClass("active"), r.removeClass("active"), l.addClass("active"))
      }), r.on("click", function(t) {
        t.preventDefault();
        var s = $(this),
          n = s.attr("href"),
          c = a.find('li > a[href="' + n + '"]').parent("li");
        s.hasClass("active") || (r.removeClass("active"), s.addClass("active"), i.removeClass("active"), $(n).addClass("active"), e.parent("li").removeClass("active"),...