JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <nav>
    <ul>

      <li>
        <a href="#" title="HOME">
        <span class="glyphicon glyphicon-globe"></span>
        <span class="glyphicon-class">Home</span>
       </a>
      </li>


      <li>
        <link href="#" title="ABOUT">
        <span class="glyphicon glyphicon-globe"></span><br>
        <span class="glyphicon-class">about</span>
       </link>
      </li>


      <li>
        <link href="#" title="CONTACT">
        <span class="glyphicon glyphicon-globe"></span><br>
        <span class="glyphicon-class">Contact</span>
       </link>
      </li>


    </ul>
    </nav>


  <p>Hello World</p>

CSS

*{
margin:0; 
padding:0;
}

/* To target only one icon, */

.glyphicon.glyphicon-globe {
    padding:3px 0 0 0;
    margin: 0 0 -15px 0;
    font-size: 17px;
}


nav {
width: 100%; 
height:50px;
line-height:50px;
text-align:center;
background:#87e0fd;
color:#f00;

}


nav ul {
margin:0; 
padding:0;
width:100%;
line-height:50px;
height:auto;
list-style:none;
}


nav li {
display: inline-block;
width:110px;
height:50px;
text-align:center;
text-decoration: none;
padding:auto;
margin:0; 
border-left: solid 1px #999;
}

/* Puts border on right side of menu */

nav li:last-child {
border-right: solid 1px #999;
}

/* To target the Hover Action or Active you could write the css like below. */

nav li:hover {
text-decoration: none;
background:#3f4c6b;
color:#fff;
cursor:pointer;
}

nav li:active {
text-decoration: none;
margin: -15px 0 0 0;

} 

/* Adding margin between glyphicon and text */
.glyphicon-class {
    display:block;
    margin-top:50px;    
}
}