JSFiddle - React, Tailwind, and code Playground

by sandeepkundu

HTML

<div class="main">
    <nav>
        <p style="float:left;"><a href="#">Home</a> | <a href="#">Services</a> | <a href="#">About Us</a> | <a href="#">Contact</a></p>
    </nav>      
</div>

CSS

body{
    background:#fff;
}
*{
    margin:0;
    padding:0;
}
.main{
    width:500px;
    margin:0 auto;
}
a{
    text-decoration:none;
    color:#2D82C3;
}
a:hover{
    text-decoration:underline;
}
p{
    font:oblique 14px/19px Arial, Helvetica, sans-serif;
    padding:5px 0 0;
}
nav{
    border:1px solid #b6b6b6;
    padding:15px;    
    margin-top:15px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:470px;
    float:right;
    background: #eee;
    background: -moz-linear-gradient(top, #fff, #efeded);
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#efeded));
    -pie-background: linear-gradient(top, #fff, #efeded);
    -moz-box-shadow: 0 0 2px 2px #cacaca;
    -webkit-box-shadow: 0 0 2px 2px #cacaca;
    box-shadow: 0 0 2px 2px #cacaca;
}
nav > p{
    font:normal 11px Verdana, Geneva, sans-serif;
}