JSFiddle - React, Tailwind, and code Playground

by codebazz

HTML

<script src="//fonts.googleapis.com/css?family=Lobster"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<body>

<ul id="grad2">
  <li><a class="active" href="#home"><i class='fa fa-home'></i> </a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#about">ok</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>

CSS

html, *{
  font-family: Lobster;
  font-size: 15px;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    display: table;
}

li {
    float: left;
    content: '';
    height: 100%;
    position: relative;
    border-right: 1px solid white;
    top: 0;
    display: table-cell;
}
li:first-child a{
   padding: 10px 10px !important;
}
li:last-child {
  border: none !important;
}

li a {
    display: block;
    color: #333;
    text-align: center;
    padding: 10px 25px;
    text-decoration: none;
    font-family: Lobster;
}

li a:hover {
    background: linear-gradient(to bottom,  #e2e2e2 40%,#dbdbdb 60%,#d1d1d1 51%,#fefefe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#grad1 {
    background: -webkit-linear-gradient(red, yellow, green); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow, green); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow, green); /* Standard syntax (must be last) */
}
#grad2{
  
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+50,d1d1d1+51,fefefe+100;Grey+Gloss+%231 */
background: #e2e2e2; /* Old browsers */
background: -moz-linear-gradient(top,  #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

}