JSFiddle - React, Tailwind, and code Playground

by Galen Gidman

HTML

<script src="https://github.com/DanielRapp/Noisy/raw/master/jquery/jquery.noisy.min.js"></script>
<link rel="stylesheet" href="https://github.com/galengidman/HTML5-Reset/raw/master/reset.min.css">
<div id="container">
    <nav>
        <ul>
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>Blog</span></a></li>
            <li><a href="#"><span>About</span></a></li>
            <li><a href="#"><span>Contact</span></a></li>
        </ul>
    </nav>
</div>

CSS

body {
    background: #eee;
    font-family: sans-serif;
}
#container {
    margin: 100px;
}
nav {
    float: left;
    height: 50px;
    padding: 3px;
    background: -webkit-linear-gradient(#bbb, #ccc);
    box-shadow: inset 0 1px 1px rgba(102, 102, 102, .5), 0 1px 0 #fff;
    border-radius: 10px;
}
nav a { text-decoration: none; }
ul {
    float: left;
    height: 50px;
    margin: auto;
    background: -webkit-linear-gradient(#fff, #ddd);
    box-shadow: 0 1px 1px rgba(102, 102, 102, .5);
    border-radius: 7px;
}
li {
    float: left;
    /*-webkit-mask-image: -webkit-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1), rgba(0, 0, 0, .0));*/
}
li:before {
    content: '';
    display: block;
    float: right;
    width: 1px;
    height: 50px;
    margin-right: 1px;
    background: #ccc;
    -webkit-mask-image: -webkit-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1), rgba(0, 0, 0, .0));
}
li:after {
    content: '';
    float: right;
    display: block;
    width: 1px;
    height: 50px;
    margin-top: -50px;
    background: #fff;
    -webkit-mask-image: -webkit-linear-gradient(rgba(0, 0, 0, .0), rgba(0, 0, 0, 1), rgba(0, 0, 0, .0));
}
li:last-child:before, li:last-child:after { content: none; }
a {
    display: block;
    width: 80px;
    height: 50px;
    padding: 0 30px 0 32px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: #666;
    text-shadow: 0 1px 0 #fff;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: background .2s linear;
}
a:hover {
    color: #006A8F;
    background: -webkit-radial-gradient(50% 100%, 60px 30px, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
}
a span {
    -webkit-mask-image: -webkit-linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, .4));
}

JavaScript

$(document).ready(function() {
    $('body, ul').noisy({intensity: .5, opacity: .05});
});