JSFiddle - React, Tailwind, and code Playground

by Elena Shevchuk

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="htpp://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
    <!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
    <li><a href="#settings1" data-toggle="tab">Settings</a></li>
    <li><a href="#settings2" data-toggle="tab">Settings</a></li>
    <li><a href="#settings3" data-toggle="tab">Settings</a></li>
    <li><a href="#settings4" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
    <div class="tab-pane" id="settings1">...</div>
    <div class="tab-pane" id="settings2">...</div>
    <div class="tab-pane" id="settings3">...</div>
    <div class="tab-pane" id="settings4">...</div>
</div>

JavaScript

$(document).ready(function(){
    $('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});
$('#myTab a[href="#profile"]').tab('show'); // Select tab by name
$('#myTab a:first').tab('show'); // Select first tab
$('#myTab a:last').tab('show'); // Select last tab
$('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)
});