JSFiddle - React, Tailwind, and code Playground

by magnus16

HTML

<link rel="stylesheet" href="http://emailsx.net/bootstrap.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="navbar navbar-default navbar-fixed-top customnav">
      <div class="container">
        <div class="navbar-header">
          <a href="../" class="navbar-brand"><span class="header"><i class="fa fa-coffee"></i>  coffee shop</span></a>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" id="navbar-main">
         
         <ul class="nav navbar-nav navbar-right">
            
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Contact</a></li>

          </ul>

        </div>
      </div>
    </div>

CSS

.customnav {
    vertical-align: middle;
    padding-top: 40px;
    padding-bottom: 40px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 13px;
    line-height:20px;
}

.customnav .nav > li {
	color: blue;
	margin: 12px 15px;
	border-bottom: 2px solid green;
}

.customnav .nav > li > a {
    padding: 0;
    line-height: 19px;
}

.header {
	font-size: 28px;
}

.customnav .nav > li.active {
    color: #ff4e50;
    border-bottom: 2px solid #ff4e50;
    line-height: 20px;
}

.active a, .active a:hover {
    color: #ff4e50;
}

body {
	padding-top: 70px;
}