JSFiddle - React, Tailwind, and code Playground

by Joshua Dwire

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div style="width:95%; margin:0 auto;">
    <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="#uno" data-toggle="tab">Tab 1</a></li>
        <li><a href="#dos" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tres" data-toggle="tab">Tab 3</a></li>
    </ul>
    <div class="tab-content" style="width:99.9%; margin:0 auto; outline: 1px solid #ddd">
        <div class="tab-pane fade active in" id="uno">
            <table class="table table-striped table-bordered tablesorter">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <div class="tab-pane fade in"id="dos">
            <table class="table table-striped table-bordered tablesorter">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>

        <div class="tab-pane fade in" id="tres">
            <table class="table table-striped table-bordered tablesorter">
                <thead>

                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>

CSS

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');

.container {
    margin-top: 10px;
}