JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <ul id=menu>	
	<li><a href=#>Button1</a></li> 
    <li><a href=#>Button2</a></li>
    <li><a href=#>hi</a></li>

     </ul>



    </body>
</html>

CSS

#menu {
	padding:0;
	margin-top:0px;
	position:absolute;
	top:0px;
	width:100%;
	float:left;
	overflow:hidden;



}


#menu li {
	list-style:none;
	float: left;
	position: relative;	
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border:1px solid black;	
	background-image: linear-gradient(#F2FF00, #AEFF00);
	margin-left:10px;
}



#menu a {
	display:block;
	padding:auto;
	text-align:center;
	padding:10px 10px;


	color: #0095FF;
	text-transform: uppercase;
	font: bold 25px Arial, Helvetica;
	text-decoration: none;
	text-shadow: 1px 1px 2px #0095FF;
}