JSFiddle - React, Tailwind, and code Playground
HTML
<div id="NavContainer">
<a href="#" class="NavButton">
<div class="NavButtonIcon AccountIcon Left">
ICON
</div>
<div class="NavButtonLabel">
ACCOUNT
</div>
</a>
<a href="#" class="NavButton Opacity-50 Center">
<div class="NavButtonIcon LocationIcon">
ICON
</div>
<div class="NavButtonLabel">
LOCATIONS
</div>
</a>
<a href="#" class="NavButton Opacity-50 Right">
<div class="NavButtonIcon PhoneIcon">
ICON
</div>
<div class="NavButtonLabel">
PHONES
</div>
</a>
</div>
CSS
#NavContainer{
/*width: 100%;*/
/* min-width: 525px;*/ /* Specify minimum width so scrollbar is provided to preserve breadcrumbs. */
height: 100%;
overflow: hidden; /* contains floated elements */
border: 1px solid #000;
margin: 20px;
padding: 10px;
}
.NavButton{
width: 20%; /* Value here is based on formula. See note below. */
height: 30px;
line-height: 30px; /* Centers text vertically: Match the height. See reference below. */
float: left;
text-align: center;
border-top: 3px solid #0000ff;
border-bottom: 3px solid #0000ff;
background-color: aqua;
}
.NavButtonIcon {
display: inline-block;
/* The next two are for IE requirements since display:inline-block is used above. */
zoom:1;
*display: inline;
}
.NavButtonLabel {
display: inline-block;
/* The next two are for IE requirements since display:inline-block is used above. */
zoom:1;
*display: inline;
}
/* 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/ */