JSFiddle - React, Tailwind, and code Playground

by kazabr

HTML

<ul id="nav">
    <li><a href="#">News</a></li>
    <li><a href="#">Things</a></li>
    <li><a href="#">Stuff</a></li>
    <li><a href="#">Junk</a></li>
    <li><a href="#">About</a></li>
</ul>

CSS

*{
    margin: 0;
    padding: 0;
}

body {
    background-color: #48036f;
}

#nav {
    list-style: none;
    float: right;
    padding: 42px 0 0 30px;
}

#nav li {
    float: left;
    margin: 0 0 0 5px;
}

#nav li a{
    text-decoration: none;
    padding: 5px 15px;
    font-weight: bold;
    color: #ccc;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -o-border-radius: 14px;
    border-radius: 14px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#nav li a:hover,
#nav li a:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}