JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://dl.dropboxusercontent.com/u/144806/pxgradient-1.0.3.js"></script>
<p>This is great:</p>

<p class="test">Nav 1 Nav 2 Nav 3 Nav 4 Nav 5 <i class="fa fa-search"></i></p>


<p>This is not so great:</p>

<div class="navigation">
	<ul>
		<li><a href="#">Nav 1</a></li>
		<li><a href="#">Nav 2</a></li>
		<li><a href="#">Nav 3</a></li>
		<li><a href="#">Nav 4</a></li>
		<li><a href="#">Nav 5</a></li>
		<li><a href="#"><i class="fa fa-search"></i></a></li>
	</ul>
</div>

CSS

ul {
    padding: 0;
}
li, li a {
    display: inline-block;
    text-decoration: none;
}
li:hover a {
    border-bottom: 3px solid;
}

JavaScript

function gradient1() {
	$(".test").pxgradient({
	    step: 10,
	    colors: ["#ff0066", "#2850FF"],
	    dir: "x"
	});
};

function gradient2() {
	$("a").pxgradient({
	    step: 10,
	    colors: ["#ff0066", "#2850FF"],
	    dir: "x"
	});
};

$(document).ready(gradient1);
$(document).ready(gradient2);