JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
    <ul>
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="projects.html">Projects</a></li>
        <li><a href="whyme.html">Why Me?</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</div>

CSS

#navigation {
    margin-top: 20px;
    float: left;
    text-align: right;
}

#navigation li {
    font-size: 20px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 3px solid #1161A5;
    color: #ffffdd;
    text-decoration: none;
    float:left;
}

#navigation li:first-child {
    border-left: none
}

#navigation li a {
    color: #ADC060;
    text-decoration: none;
}

#navigation li a:hover, #navigation li a :visited, #navigation li a:active {
    color: #1161A5;
}

#navigation li a.active {
    color: #1161A5;
    margin-bottom: 5px;
}

JavaScript

$('#navigation li a').hover(function () {
    $(this).effect("bounce", { times: 3 }, 300);
})