JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab">
    <li class="active">
        <a href="#home">
            <input style="display: inline-block;" type="checkbox" />
            <div style="display: inline-block;">Home</div>
        </a>
    </li>
    <li>
        <a href="#profiles">
            <input style="display: inline-block;" type="checkbox" />
            <div style="display: inline-block;">Profiles</div>
        </a>
    </li>
    <li>
        <a href="#messages">
            <input style="display: inline-block;" type="checkbox" />
            <div style="display: inline-block;">Messages</div>
        </a>
    </li>
</ul>

<div style="height: 900px;" id='content' class="tab-content">
    <div class="tab-pane active" id="home">
        <ul>
            <li>home</li>
            <li>home</li>
            <li>home</li>
        </ul>
    </div>
    <div class="tab-pane" id="profiles">
        <ul>
            <li>profile</li>
            <li>profile</li>
            <li>profile</li>
        </ul>
    </div>
    <div class="tab-pane" id="messages">
        <ul>
            <li>message</li>
            <li>message</li>
            <li>messags</li>
        </ul>
    </div>
    <div class="tab-pane" id="settings"></div>
</div>

JavaScript

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});