JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></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>
<nav class="navbar  navbar-default  navbar-fixed-top">
  <div class="container-fluid the-navbar">
    <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>


    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="cover.html">Learning Pulse</a>
        <li><a href="Index.html">Home</a>
        <li><a href="mycourse.html">Course</a>
        <li><a href="#contact">Contact</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
         <li><a href="signup.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
    <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

  </div>
</nav>

CSS

.navbar {
  position:absolute;
  top:30px;
  z-index:10;
  background:transparent;
  width:80%;
  margin-left:auto;
  margin-right:auto;
  font-style: times;
  font-size:19px;
  
 }
.navbar ul{
  text-align:center;
}
#navbar ul li a {
  color:red;
}

.navbar{
  background:lightblue;
  border:none;
}