JSFiddle - React, Tailwind, and code Playground

by Moor

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">
<form>
    <select id='mySelect'>
        <option value='0'>Home</option>
        <option value='1'>Profile</option>
        <option value='2'>Messages</option>
        <option value='3'>Settings</option>
    </select>
</form>
<ul class="nav nav-tabs" 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>

CSS

#myTab {
    display:none;
}

JavaScript

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