JSFiddle - React, Tailwind, and code Playground

by Monty Seaman

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!--Navbar-->
	<div class="navbar" role="navigation">
		<div class="container">
	
			<!--navbar responsive toggle-->
			<div class="navbar-header">
				<button class="navbar-toggle collapsed" type="button" data-target="#navbar-responsive-collapse" data-toggle="collapse" >
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<!-- brand and toggle grouped together for better mobile display -->
				<img class="navbar-brand" src="images/navbar_logo.png" alt="logo">
			</div><!--end of navbar-header-->
		
			<div class="collapse navbar-collapse" id="navbar-responsive-collapse">
				<ul class="nav navbar-nav navbar-default" id="myNav">
					<li class="active">
						<a href="index.html"> Home</a>
					</li>
					<li>
						<a href="services.html"> Services</a>
					</li>
					<li>
						<a href="contact.html"> Contact</a>
					</li>
				</ul>
			</div><!-- end of collapse-->
		</div><!-- end of container-->
	</div><!-- end of navbar -->

CSS

.navbar {
    background-color: white;
    border-bottom: solid #3869a1;
    border-bottom-width: 5px;
    height: 70px;
}

.navbar-brand {
    width: 165px;
    height: 34px;
    padding: 0px;
    margin-left: 15px;
    margin-top: 15px;
}

#myNav {
    font-family: arvo;
    font-size: 18px;
    display: inline;
    position: relative;
    float: right;
    margin-top: 10px;
    height: 25px;
}

.navbar-default {
    background-color: transparent;
    border: none;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
  color:#6f9d8b;
  background: none;
}

.navbar-nav > .active > a {
    color: #3869a2;
    background: none;
}
    
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
  color: #bd1c1c;
  background: none;
}

.nav li a {
    color: #3869a2;
}

.nav li a:hover {
    color: #bd1c1c;
    background: none;
    border-bottom-style: solid;
    border-bottom-color: #bd1c1c;
    border-bottom-width: 5px;
    padding-bottom: 19px;
    z-index: 1;
}

.nav li a:visited {
    border:none;
    background:none;
}

.nav li a:active a:hover {
    color: #bd1c1c;
    background: none;
    border-bottom-style: solid;
    border-bottom-color: #bd1c1c;
    border-bottom-width: 3px; 
}

@media (max-width: 769px) {
    .navbar-toggle {
        height: auto;
        width: auto;
        position: static;
        margin-top: 14px;
    }
    
    .navbar-toggle .icon-bar {
        display: block;
        width: 32px;
        height: 4px;
        position: static;
        background-color: #3869a2;
        border-radius: 1px;
    }
    
    #myNav {
        background-color: white;
        height: auto;
        width: 50%;
        margin-left: 100%;
        text-align: left;
        margin-top: 6px;
        float: right;
        z-index: 999;
        border: 1px solid #3869a2;
    }
    
    .nav li a:hover {
        color: none;
        background: none;
        border-bottom-style: none;
        border-bottom-color: none;
       ...