JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nav">
    <li><a href="?page=home">Home</a></li>
    <li><a href="?page=couriers">Couriers</a></li>
    <li><a href="?page=reviews">Reviews</a></li>
    <li><a href="?page=retailers">Retailers</a></li>
    <li><a href="?page=about">About</a></li>
</ul>

CSS

.nav{
	
    font-size:18px;	
	font-weight: bold;
    list-style:none;
    margin:0;
    padding:0;
    text-align:center;
}


.nav li{
    display:inline;	
}


.nav a{
	width: 144px;
    background: -webkit-linear-gradient(rgb(256,256,256), rgb(175,175,175));
    background:    -moz-linear-gradient(rgb(256,256,256), rgb(175,175,175));
    background:         linear-gradient(rgb(256,256,256), rgb(175,175,175));
	text-decoration:none;
    display:inline-block;
    padding:10px;
}


.nav li > a:first-child {
    border-radius: 20px 0px 0px 0px;
}