JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navigation">
            <ul id="navList">
                <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX.html">Discover</a></li>
                <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX/documentation.html">Documentation</a></li>
                <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX/download.html">Download</a></li>
                <li class="navItem"><a href="http://www.jacobsmits.com/placeholderRX/donate.html">Donate</a></li>
            </ul>
            <script type="text/javascript">
                $('.navItem').each(function() {
                    var $link = $(this).children('a'); 
                    $link.hover( 
                        function() {
                            $link.css('width', '224px');
                        },
                        function() {
                            $link.css('width', '192px');
                        }
                    )
                });            
            </script>
        </div>

CSS

#navigation {
    float:left;
    width:256px;    
}

#navList {
    list-style:none;    
}

.navItem, .navItem a {
    display:block;
    width:100%;
    height:50px;    
}

.navItem a:link, #navList a:visited {
    color:#FFF;
    text-decoration:none;
}

.navItem a {
    margin:0px 12px 8px 0px;
    float:right;
    width:192px;
    height:40px;
    border-color:#CCC;
    border-width:1px;
    border-style:inset;
    border-radius:6px;
    -moz-border-radius:6px;    
    -webkit-border-radius:6px;    
}