JSFiddle - React, Tailwind, and code Playground

by Rhys O'Connor

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container large-padding-top">
    <div class="col-xs-2" id="menuSidebar" style="padding-top: 70px;">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a data-toggle="tab" href="#cakes">Cakes</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Drinks
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a data-toggle="tab" href="#Tea">Tea</a></li>
                    <li><a data-toggle="tab" href="#Coffee">Coffee</a></li>
                    <li><a data-toggle="tab" href="#ColdDr">Cold Drinks</a></li>
                </ul>
            </li>
            <li><a data-toggle="tab" href="#Breakfast">Breakfast</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    Lunches
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a data-toggle="tab" href="#LightLunch">Light Lunch</a></li>
                    <li><a data-toggle="tab" href="#ChildLunch">Children Lunches</a></li>
                    <li><a data-toggle="tab" href="#OtherLunch">Lunches</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="col-xs-10">
        <div class="tab-content" style="width: 100%">
            <div id="cakes" class="tab-pane fade in active">
                <h3>Our Cakes</h3>
                <table class="table table-hover">
                    <thead>
                        <tr>
                           ...

CSS

.nav-pills {
  position: fixed;
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #337ab7;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}