JSFiddle - React, Tailwind, and code Playground

by Oliver Zhang

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<header>
<nav>
    <ul>
        <li><a href="#"><i class="fa fa-home fa-fw"></i>Home</a></li>
        <li><a href="#"><i class="fa fa-linux fa-fw"></i>Linux</a></li>
        <li><a href="#"><i class="fa fa-windows fa-fw"></i>Windows</a></li>
        <li><a href="#"><i class="fa fa-apple fa-fw"></i>Apple</a></li>
    </ul>
</nav>
</header>

CSS

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
nav{
    width:768px;
    height:60px;
    margin:10px auto;
    background:-webkit-linear-gradient(#FF5E36,#FF3503);
    background:linear-gradient(#FF5E36,#FF3503);
    text-align:center;
    border-radius:15px;
}

ul{
    list-style:none;
}
li{
    display:inline-block;
}
a{
    text-decoration:none;
    display:block;
    line-height:50px;
    color:white;
    width:100px;
    padding-top:5px;
}

a:hover{
    border-bottom:5px solid;
    color:black;
}