JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<link rel="stylesheet" href="http://dev.rocktfan.com/bootstrap/css/bootstrap.css">
<div style='min-width:800px;'>
    <div class="navbar">
        <div class="navbar-inner subnavbar">
            <ul class="nav subnav">
                <li class="active"><a href="#">xxxxxxxxxxxxxxxxxxxxxxx</a></li>
            </ul>
            <ul class="nav subnav pull-middle">
                <li><a href="#">Home</a></li>
                <li class="active"><a href="#">Home 2</a></li>
                <li><a href="#">Home 3</a></li>
            </ul>
            <ul class="nav subnav pull-right">
                <li class="active"><a href="#">xxxxxxxxxxxxxxxxxxxxxxx</a></li>
            </ul>
        </div>
    </div>
</div>

CSS

body {
    margin:10px;
    font-size:13px;
    font-family:'Open Sans', sans-serif;
    font-style: normal;
}
.navbar-inner.subnavbar {
    padding:0;
    width:100%;
}
.subnav {
    width:11%;
}
.subnav a {
    color:#366093!important;
}
.subnav > .active > a {
    background-color: #DCE7F4!important;
}
.navbar .subnav > li > a:focus, .navbar .subnav > li > a:hover {
    text-decoration: underline;
    background-color: rgba(0, 0, 0, 0);
}
.subnav.pull-middle {
    margin:0;
    left: 0;
    right: 0;
    text-align:center;
    width:76.5%;
}
.subnav.pull-middle li {
    display:inline-block;
    float:none;
    height: 40px;
    vertical-align: middle;
}
.subnav.pull-right li {
    float:right !important;
}

JavaScript

$(".nav li").click(function () {
    var th = $(this);
    $(".nav li").each(function () {
        $(this).removeClass('active');
    });
    th.addClass('active');
});