JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
</ul>
</nav>
CSS
nav{
font-family:arial;
font-size:15px;
color:#000;
background:#ff0000;
padding-top:24px;
padding-left:20px;
border-bottom:5px solid #000;
width:100%;
height:10%;
position:fixed;
top:0;
left:0;
z-index:999;
}
nav a{
color:#000;
text-decoration:none;
-webkit-transition:all 0ms linear;
-moz-transition:all 0ms linear;
-o-transition:all 0ms linear;
-ms-transition:all 0ms linear;
transition:all 0ms linear;
}
nav ul{
display:block;
}
nav li{
list-style:none;
padding:0;
display:inline;
margin-right:20px;
}
nav a:hover{
color:#ff0000;
background:#000;
padding:24px;
-webkit-transition:all 0ms linear;
-moz-transition:all 0ms linear;
-o-transition:all 0ms linear;
-ms-transition:all 0ms linear;
transition:all 0ms linear;
}