JSFiddle - React, Tailwind, and code Playground

HTML

<div id="home" class="container-fluid">
    <nav class="navigation">
        <ul>
            <li><a class="navigation" href="#me">About</a>
            </li>
            <li><a class="navigation" href="#portfolio">Portfolio</a>
            </li>
            <li><a class="navigation" href="#contact">Contact</a>
            </li>
            <li><a class="navigation" href="#blog">Travelblog</a>
            </li>
        </ul>
    </nav>
</div>

CSS

body{
background-color: black;
}
/*Navigation formatting*/
 .navigation {
    text-decoration:none;
    list-style:none;
    text-align:center;
    padding-top:50px;
    border-top: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    font-size: 38px;
    color:white;
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}
.navigation ul {
    padding-left: 0;
}
.navigation li {
    display:inline;
    padding-left: 3em;
}
li:first-child {
    /*padding vom ersten element des menues entfernen*/
    padding-left: 0;
}
.navigation a {
    display:inline-block;
    padding:10px;
}
.navigation a:hover {
    color:#bd4832;
    text-shadow: 0px 0 15px #fff;
    border:1px;
    text-decoration:none;
    border-top: 1px solid #fffad5;
    border-bottom: 1px solid #fffad5;
}

JavaScript

< script type = "text/javascript" >
        //Menu flash on site load ====== doesnt work :(
        $(function () {
            $(".navigation a").mouseover();
        }); 
    < /script>