JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid nav navContainer">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/"><img src="/img/mylogo.png" alt="" title="" class="mtymLogo" /></a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-right hidden-xs hidden-sm hidden-tablet-portrait">
                        <li><a href="/Story.aspx">STORY</a></li>
                        <li><a href="/Events.aspx">EVENTS</a></li>
                        <li><a href="/Buzz.aspx">BUZZ</a></li>
                        <li><a href="/Store.aspx" target="_blank">STORE</a></li>
                        <li><a href="/Connect.aspx">CONNECT</a></li>
                    </ul>
                    <ul class="nav navbar-nav visible-xs visible-sm show-tablet-portrait">
                        <li class="text-center mobile"><a href="/Story.aspx">STORY</a></li>
                        <li class="text-center mobile"><a href="Events.aspx">EVENTS</a></li>
                        <li class="text-center mobile"><a href="/Buzz.aspx">BUZZ</a></li>
                        <li class="text-center mobile"><a href="/Store.aspx" target="_blank">STORE</a></li>
               ...

CSS

/*links*/
a, a:visited { color:#359ED1; }
a:hover {  color:#359ED1; text-decoration:underline; }

a.gray, a.gray:visited { color:#707070; }
a.gray:hover {  color:#707070; text-decoration:underline; }

a.offwhite, a.offwhite:visited { color:#ECE8DA; }
a.offwhite:hover {  color:#ECE8DA; text-decoration:underline; }

a.lime, a.lime:visited { color:#B5D585; }
a.lime:hover {  color:#B5D585; text-decoration:underline; }

a.white, a.white:visited { color:#FFF; }
a.white:hover {  color:#FFF; text-decoration:underline; }

a.plum, a.plum:visited { color:#715354; }
a.plum:hover {  color:#715354; text-decoration:underline; }


/*nav*/
.navbar-nav > li { background-color:rgba(0,0,0,.1); }
/*.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color:rgba(0,0,0,.8); }*/
.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color:#ECE8DA; font-family: museo-slab, georgia, 'Times New Roman'; font-weight:500; height:100px; border-left:1px dotted #ECE8DA; text-shadow: 2px 2px 2px #000000; }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > li > a.active { color:#ECE8DA; background-color:rgba(0,0,0,.5); }
.nav > li > a { padding:70px 30px 5px 5px; vertical-align:bottom; }
.dropdown-header { /*font-family: museo-slab, georgia, 'Times New Roman';*/ color:#FFF; }
.dropdown-menu > li > a { font-family: museo-slab, georgia, 'Times New Roman'; font-size:12px; color:#ECE8DA; }
.dropdown-menu { background-color:rgba(0,0,0,.5); color:#ECE8DA; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color:rgba(0,0,0,.8); color:#ECE8DA; }
ul.nav...