JSFiddle - React, Tailwind, and code Playground

HTML

<div id="button_menu">  

<ul>
<li class='faq'><a href="#" tabindex="27">FAQs</a></li>
<li class='map'><a href="#" tabindex="28">Interactive Property Map</a></li>
<li class='request'><a href="#" tabindex="29">Request a Presentation</a></li>
</ul>
 </div>

CSS

#button_menu {
	font-family:"adelle", Georgia, Times, serif;
	font-size:12px;
	font-weight:700;
	float:right;
	
	position:relative;
}

#button_menu ul{
	list-style:none;
	margin:40px 10px 0px 0px;
	padding:0px;
    display:table;
    border-spacing:5px;
}

#button_menu ul li{
	display: table-cell;
	text-align:center;
	line-height:18px;
	height:45px;	
	padding:0px;
	vertical-align:middle;
	
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px; /* future proofing */
}

#button_menu ul li a{
	text-decoration:none;
	text-transform:uppercase;
    vertical-align: middle;
	color:#fff;
    display:block;
}

#button_menu ul li.faq {
	width:100px;
	background-color:#6A752A;
    
}

#button_menu ul li.map {
	width:140px;
	background-color:#CA6C18;
}


#button_menu ul li.request {
	width:150px;
	background-color:#A5B62E;
}