JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap-tab.js"></script>
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<ul class="nav nav-pills" id="myTab">
    <li class="active"><a href="#home">Home</a>
    </li>
    <li><a href="#profile">Profile</a>
    </li>
    <li><a href="#messages">Messages</a>
    </li>
    <li><a href="#settings">Settings</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Home content</div>
    <div class="tab-pane" id="profile">Profile content</div>
    <div class="tab-pane" id="messages">Messages content</div>
    <div class="tab-pane" id="settings">Settings content</div>
</div>

JavaScript

$(function() {
    var $select = $('<select id="mySelect"></select>');
    var count = 0;
    $('.nav-pills li a').each(function() {
      $select.append('<option value="' + (count++) + '">' + $(this).text() + '</option>');
    });

    $('.nav').before($select).hide();

    $('#mySelect').on('change', function (e) {
        $('#myTab li a').eq($(this).val()).tab('show');
    });
});