JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="Menu">
<ul>            
<li id="contactmenu">
<a href="#contactpage" class="smoothScroll" style="margin-right:50px">contact</a>
</li>   
<li id="portfoliomenu">
<a href="#portfoliopage" class="smoothScroll">portfolio</a>
</li>
<li id="servicesmenu">
<a href="#servicespage" class="smoothScroll">services</a> 
</li> 
<li id="aboutmenu">
<a href="#aboutpage" class="smoothScroll">about</a>
</li>
<li id="homemenu">
<a href="#homepage" class="smoothScroll">home</a>
</li>  
</ul>
</div>

CSS

#Menu li
{
position: relative;
display: inline-block;
float: right;
font-family: "Baskerville";
font-size: 30px;
list-style-type: none;
text-align: left;
    width:20%;

}

div#Menu ul a
{
display: inline-block;
text-decoration: none;
color: blue;
border-bottom: 2px solid maroon;
margin-right: 10px;
padding-bottom: 8px;
width: 0px;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}

div#Menu ul a:hover
{
display: inline-block;
text-decoration: none;
color: #91A493;
border-bottom: 2px solid maroon;
margin-right: 10px;
padding-bottom: 8px;
width: 100%;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}