JSFiddle - React, Tailwind, and code Playground

by Yandy Viera

HTML

<nav role="navigation" class="site-navigation main-navigation">
    <div id="middleNavigation">
        <img src="http://notthedroidyouarelookingfor.com/wp-content/themes/striker/images/NTDYALF-Logo.png" alt="" id="NTDYALFLogo">
        <a href="http://notthedroidyouarelookingfor.com/"><span>Home</span></a>

        <a href="http://notthedroidyouarelookingfor.com/index.php/sample-page/"><span>Sample Page</span></a>

    </div>
</nav>
<p>Hover the links to see the border</p>

CSS

body {
    margin: 0;
}
.main-navigation {
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 2px 2px 0px rgba(0, 0, 0, 0.75);
    margin-bottom: 4px;
}
#middleNavigation {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    display: flex;
}
.main-navigation a {
    font-size: 1.4rem;
    font-size: 14px;
    font-weight: normal;
    margin-left: 1em;
    text-decoration: none;
    padding: 0 0.8em;
    word-spacing: 4px;
    font-family: Arial;
    border-top: 4px solid transparent;
    color: #000;
    display: flex;
    align-items: center;
}
.main-navigation a:hover {
    border-top-color: #000;
}