JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="main-nav">
<ul>
<li><a href="one.php"> Home </a></li>
<li><a href="transaction.php"> Trade Now</a></li>

<li><a href="view.php"> Transactions  </a></li>
<li><a href="chart.php"> Performance </a></li>



<li><a href="complete.php">History </a></li>
 <li class="time">US Markets Open in&nbsp;<span id="hm_timer" class="style    colorDefinition size_sm">08:05:35</span>&nbsp;hours </li>
</ul>

</nav>

CSS

.main-nav{
color:#FFF;
width:100%;
background-color:#5e2d91;
float:right;
line-height:42px;
    margin-top: -3px;
}
.main-nav ul li{
display: inline;
padding: 0px 10px;


}
.main-nav ul li a{
color:#FFF;
text-decoration:none;
padding: 20px 14px;

 }
.main-nav ul{
margin-bottom:7px !important;}
 .main-nav ul li a:hover {
background-color:#0098aa;
}
body .main-nav ul li a:active{

background-color:#0098aa;
}