JSFiddle - React, Tailwind, and code Playground
HTML
<!--
Reference Question: http://stackoverflow.com/q/11586791/1195891
Answer by arttronics.
-->
<div id="navContainer">
<a href="#" class="navButton">
<span class="navButtonIcon">ICON 1</span> <br />
<span class="navButtonText">ACCOUNT</span>
</a>
<a href="#" class="navButton">
<span class="navButtonIcon">ICON 2</span> <br />
<span class="navButtonText">LOCATIONS</span>
</a>
<a href="#" class="navButton">
<span class="navButtonIcon">ICON 3</span> <br />
<span class="navButtonText">PHONES</span>
</a>
<a href="#" class="navButton">
<span class="navButtonIcon">ICON 4</span> <br />
<span class="navButtonText">CONTACT</span>
</a>
<a href="#" class="navButton">
<span class="navButtonIcon">ICON 5</span> <br />
<span class="navButtonText">HELP</span>
</a>
</div>
CSS
#navContainer {
min-width: 500px; /* Specify minimum width so scrollbar is provided to preserve breadcrumbs. */
height: 60px; /* Total height of navContainer. Note line-height below is 1/2 this size. */
line-height: 30px; /* Centers text vertically inside navContainer Buttons. See reference below. */
text-align: center; /* Centers text and icon horizontally inside of navContainer Buttons */
overflow: hidden; /* Contains floated elements */
/* Simple navContainer style. */
border: 3px solid #0000ff;
background-color: green;
/* If not using margin, shorthand 'border' property above should be changed to 'border-top' and 'border-bottom' only, as width will be more than 100%. */
margin: 20px;
padding: 10px;
}
.navButton {
width: 20%; /* Value here is based on Formula. See formula notes below. */
float: left;
background-color: aqua;
}
.navButton:hover {
background-color: yellow;
}
.navButtonIcon {
background-color: white; /* Simple example of ICON background white in color. */
}
.navButtonText {
color: green; /* Simple example of green colored Text Words. */
}
/* Forumula: Percent Width = 100 / number of elements */
/* Example: 1 div=100% 2 divs=50% 3 divs=33.33% 4 divs=25% 5 divs=20% */
/* Centers text vertically: http://css-tricks.com/vertically-center-multi-lined-text/ */