JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/start/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://fonts.googleapis.com/css?family=Cookie"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <div class="navbar navbar-inverse navbar-fixed-top ui-widget-header">
        <div class="container bigFontNavbar">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" style="padding-top:0px; padding-bottom:2px;">
                    <span>
                        <!--<img src="../../Images/test-48.ico" height="48" alt="">-->
                    </span>
                    <div id="divBrandNameText" class="cookieFontGoogle" style="display:inline-block;color:#FFFFFF; vertical-align:middle;">Brand</div>
                </a>
            </div>
            <div class="navbar-collapse collapse">


                <ul class="nav navbar-nav">
                    <li>
                        <a href="/"><i class="glyphicon glyphicon-home" style="padding-right:3px;"></i>HOME</a>
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-user" style="padding-right:3px;"></span>ADMIN<span class="caret"></span></a>
            ...

CSS

.navbar {
            background-color: #00A0F0;
        }

        .navbar-fixed-top {
            border-bottom: 1px solid #0078A0;
        }

        .navbar-inverse .navbar-nav > li > a {
            color: #FFFFFF;
            font-weight: bold;
        }

            .navbar-inverse .navbar-nav > li > a:hover,
            .navbar-inverse .navbar-nav > li > a:focus {
                color: #737373;
                font-weight: bold;
            }

        .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
            color: #FFFFFF;
            background-color: #00A0F1;
        }

            .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
            .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
                color: #FFFFFF;
                font-weight: bold;
            }

        .navbar-inverse .navbar-nav > .open > a,
        .navbar-inverse .navbar-nav > .open > a:hover,
        .navbar-inverse .navbar-nav > .open > a:focus {
            color: #FFFFFF;
            font-weight: bold;
            background-color: #00A0F1;
        }

        


.dropdown-menu { background-color: #00A0F1 !important; ; }

JavaScript

// Add slideDown animation to Bootstrap dropdown when expanding.
        $('.dropdown').on('show.bs.dropdown', function () {
            $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
        });

        // Add slideUp animation to Bootstrap dropdown when collapsing.
        $('.dropdown').on('hide.bs.dropdown', function () {
            $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
        });