JSFiddle - React, Tailwind, and code Playground

HTML

<div class="">
				<ul class="header-menu-ul">
				<li class="header-menu menu-link1-color"><a href="" class="header-menu-link ">ABC's Office</a></li>
				<li class="header-menu menu-link2-color"><a href="" class="header-menu-link ">Benefits</a></li>
				<li class="header-menu menu-link3-color"><a href="" class="header-menu-link ">NEW Brand</a></li>
				<li class="header-menu menu-link4-color"><a href="" class="header-menu-link ">Editorial</a></li>
				<li class="header-menu menu-link5-color"><a href="" class="header-menu-link ">Manger</a></li>
				<li class="header-menu menu-link6-color"><a href="" class="header-menu-link ">Extra</a></li>
				</ul>
				
				</div>

CSS

.header-menu-ul {
	padding:0px;
	min-height: 200px;
}

.header-menu-ul li {
 float: left;  
}

.header-menu {
	margin: 0px;
 padding: 0px;
 list-style: none;
 white-space: nowrap;
 display: inline-block;
 width: 150px; /* 'X' */
}
.header-menu-link {
	font-size:25px;
	font-family:Calibri;
	padding:20px 10px 150px 10px;
	color:#FFF !important;
	display: inline-block; 
 max-width: 140px; /* 'X' minus gutter */
 white-space: nowrap; 
 text-overflow: ellipsis; 
 overflow:hidden;
}
.menu-link1-color{
background-color:#4d7db3;
}
.menu-link2-color {
background-color:#4d7db3;
opacity:0.6;
}
.menu-link3-color {
background-color:#4d7db3;
opacity:0.6;

}
.menu-link4-color {
background-color:#4d7db3;
opacity:0.5;
}
.menu-link5-color {
background-color:#4d7db3;
opacity:0.4;

}
.menu-link6-color {
background-color:#4d7db3;
opacity:0.3;

}