JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<select class="select-tabs form-control hidden-sm visible-xs">
	<option value="0">Tab 1</option>
	<option value="1">Tab 2</option>
	<option value="2">Tab 3</option>
</select>

<ul class="nav nav-pills hidden-xs">
    <li class="active"><a data-toggle="pill" href="#tab1">Tab 1</a></li>
    <li><a data-toggle="pill" href="#tab2">Tab 2</a></li>
    <li><a data-toggle="pill" href="#tab3">Tab 3</a></li>
</ul>

<div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
        content 1
    </div>
    <div id="tab2" class="tab-pane fade">
        content 2
    </div>
    <div id="tab3" class="tab-pane fade">
        content 3
    </div>
</div>

CSS

body{
	padding: 1em;
}

JavaScript

(function(){

	var selectTabs = $('.select-tabs');		
		selectTabs.on('change', function (e) {
			$('.nav-pills li a').eq($(this).val()).tab('show'); 
		});

})();