JSFiddle - React, Tailwind, and code Playground

by diaryfakta

HTML

<nav>
<ul>
<li class='menu1'><a href='#'>Menu1</a></li>
<li class='menu2'><a href='#'>Menu2</a></li>
<li class='menu3'><a href='#'>Menu3</a></li>
<li class='menu4'><a href='#'>Menu4</a></li>
</ul>
</nav>

CSS

nav{
font-family:arial;
font-size:15px;
color:#000;
background:transparent;
padding:5px;
border-bottom:5px solid #000;
width:100%;
height:auto;
position:fixed;
top:0;
left:0;
z-index:999;
}
nav a{
color:#000;
text-decoration:none;
-webkit-transition:all 900ms linear;
-moz-transition:all 900ms linear;
-o-transition:all 900ms linear;
-ms-transition:all 900ms linear;
transition:all 900ms linear;
}
nav ul{
display:block;
}
nav li{
list-style:none;
padding:0;
display:inline;
margin-right:20px;
}
nav a:hover{
-webkit-transition:all 900ms linear;
-moz-transition:all 900ms linear;
-o-transition:all 900ms linear;
-ms-transition:all 900ms linear; 
transition:all 900ms linear;
}
nav .menu1:hover{padding:5px;-webkit-transition:all 200ms linear;
-moz-transition:all 200ms linear;
-o-transition:all 200ms linear;
-ms-transition:all 200ms linear;
transition:all 200ms linear;}
.menu1{border-bottom:solid 5px #FF0033;}
.menu2{border-bottom:solid 5px #FF009E;}
.menu3{border-bottom:solid 5px #A200FF;}
.menu4{border-bottom:solid 5px #5E00FF;}