JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.min.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>
 <div class="home">
  <div class="header-tinting">
    <div class="basis-menu"></div> 
    <nav id="menu">
     <ul>
      <li  class="active" ><a href="#ex1">Home</a></li>
      <li><a href="#ex2">About</a></li>
	  <li><a href="#ex3">Resume</a></li>
	  <li><a href="#ex4">Portfolio</a></li>
      <li><a href="#ex5">Blog</a></li>
       <li><a href="#ex4">Contact Me</a></li>
	</ul>
</nav>   
</div> 
</div>

CSS

header {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 620px;
  
}
.home{
    position: relative;
    width: 100%;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-position: center;
    text-align: center;
     background-size: cover;
}
/* === Header tinting === */
.header-tinting{
    background: rgba(29, 32, 33, 0.35) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    position:relative;
} 
.basis-menu{
   position: fixed;
   width: 100%;
   height:70px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.6);
   opacity:1;
   transition:all 1s linear;
   -moz-transition:all  1s  linear;
   -webkit-transition:all 1s linear;
   -o-transition:all  1s linear;
}
#menu {
     display:block;
   position: relative;
   width:100%;
   max-width:1920px;
   height: 70px;
  font-family: 'Asap',regular, monospace;
    font-size: 28px;
}
#menu ul{
    list-style: none; 
    float: right;
    display: inline-table; 
     padding: 24px 10px;
}
#menu li {
  list-style: none;
}
#menu li a {
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  position: relative;
  white-space: nowrap;
     padding: 0px 1px;
    color: rgb(255, 255, 255);
      text-decoration: none;
      font-weight: 300;
    letter-spacing:2px;
    display: inline-block;
}

#menu li a .hover {
  color: #6bb9f0;
   display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  overflow-x: hidden;
  transition: all 0.5s ease;
  white-space: nowrap;
  padding: 0 1px;
}
#menu li a:hover .hover {
  width: 100%;
}
#menu li  {
    float:left; }

JavaScript

$(document).ready(function(){
$("#menu a").each(function(){
 var item = $(this).html();
 $(this).append('<span class="hover">'+item+'</span>');
});
 
});