JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navholder">

<div id="nav">
<a href="index.html"><div id="button1"><div id="triangle"></div><div id="buttonname">Home</div></div></a>

<a href="buying.html"><div id="button2"><div id="triangle"></div><div id="buttonname">Buying</div></div></a>

<a href="renting.html"><div id="button3"><div id="triangle"></div><div id="buttonname">Renting</div></div></a>

<a href="building.html"><div id="button4"><div id="triangle"></div><div id="buttonname">Building</div></div></a>

<a href="architecture.html"><div id="button5"><div id="triangle"></div><div id="buttonname">Architecture</div></div></a>

<a href="landbuying.html"><div id="button6"><div id="triangle"></div><div id="buttonname">Land Buying</div></div></a>
</div>



</div>

CSS

#navholder {
	position:absolute;
	background:#FFFFFF;
	width:950px;
	height:350px;
	top:150px;
	margin:0 auto;
	left:0;
	right:0;
	border:solid 1px #999;
	background-image: url(http://placehold.it/950x350);

}

#nav {
	width:950px;
	position:absolute;
	bottom:-22px;
    text-align: center;
	display:inline-block;
}

#button1, #button2, #button3, #button4, #button5, #button6 {
	width:130px;
	height:35px;
	background-color:#879362;
	margin-left:2px;
	margin-right:2px;
	display:inline-block;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	line-height:35px;
	font-weight:bold;
	color:#fff;
}

#button1:hover > #triangle, #button2:hover > #triangle, #button3:hover > #triangle, #button4:hover > #triangle, #button5:hover > #triangle, #button6:hover > #triangle{	
	display: block;
}

#button1:hover, #button2:hover, #button3:hover, #button4:hover, #button5:hover, #button6:hover{	
	background-color:#B7939B;
}

#triangle {
	position:relative;
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 15px solid #B7939B;
	top:-15px;
	left:0px;
	right:0;
	margin:0 auto;
	display: none;
}

#buttonname {
	width:130px;
	position:absolute;
	top:0px;
	margin:0 auto;
}