JSFiddle - React, Tailwind, and code Playground

HTML

<div style="white-space: nowrap;position: fixed;width: 100%;">
	<div class="navigationtab" style="float:right">
		Account
	</div>
	<div class="navigationtab">
		Home
	</div>
	<div class="navigationtab">
		<div class="tabmenu">
			<div class="tabmenuitem">Test1</div>
		</div>
		Services
	</div>
	<div class="navigationtab">
		<div class="tabmenu">
			<div class="tabmenuitem">Test2</div>
			<div class="tabmenuitem">Test3</div>
		</div>
		Another One
	</div>
	<div class="navigationtab">
		About
	</div>
</div>

CSS

body, div {margin: 0; padding: 0;}

.navigationtab {
	
	font-family: 'Baloo Tamma', cursive;
	
	display: inline-block;
	
	text-align: center;
	
	width: 150px;
	min-height: 30px;
	
	background-color: #00ace6;
	
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	     
	user-select: none;
	
	cursor: pointer;
  vertical-align: top;
}

.navigationtab:hover {
	background-color: #0086b3;
}

.tabmenu {
	width: 150px;
	text-align: center;
}

.tabmenuitem {
	background-color: #00ace6;
	width: 150px;
	height: 25px;
	     
	user-select: none;
	
	cursor: pointer;
}

.tabmenuitem:hover {
	background-color: #0086b3;
}