JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

<nav>
    <ul>
        <li><a href="#" class="home">Home</a></li> 
        <li><a href="#" class="about">About</a></li> 
        <li><a href="#" class="contact">Contact</a></li> 
    </ul>
</nav>

CSS

body{
    font-family: Arial;
}
nav > ul{
    width: 500px;
    height: 50px;
    margin: 0 auto;
    padding: 10px;
}
nav > ul > li{
    display: inline;
}
nav > ul > li > a{
    display: block;
    float: left;
    line-height: 32px;
    margin-left: 18px;
    font-family: 'Indie Flower', cursive;
    text-decoration: none;
    color: black;
    -webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
nav > ul > li:first-child a{
    margin-left: 0;
}
nav > ul > li > a:before{
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    float: left;
    margin-right: 3px;
    
}
nav > ul > li > a:hover{
    margin-top: -5px;
}
.home:before{
    background: url("http://foodsense.is/-/img/nav-blog.png") no-repeat;
}
.about:before{
    background: url("http://foodsense.is/-/img/nav-alist.png") no-repeat;
}
.contact:before{
    background: url("http://foodsense.is/-/img/nav-about.png") no-repeat;
}