JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main-menu">
      <li class="homepage">Home</li>
      <li class="gallerypage activ">Gallery</li>
      <li class="memberspage">Members</li>
      <li class="logoutpage">Logout</li>
    </ul>

CSS

.main-header {
	margin: 0 auto;
	width: 1000px;
	height: 76px;
	display: flex;
	justify-content: space-between;
	background: #efefef url(./img/layer2.png) no-repeat;
	background-size: cover;
}

.main-menu {
	margin: 0;
	font-size: 0;
	list-style: none;
	margin-right: 100px;
	white-space: nowrap;
	line-height: 110px;
}

.main-menu li {
	width: 50px;
	height: 73px;
	font-size: 16px;
	display: inline-block;
	padding-left: 25px;
	padding-right: 28px;
	border-right: 2px solid #d5d5d5;
}

.activ {
	background: #e1dddd;
	background-repeat: no-repeat;
	background-position: 40px 16px;
	border-bottom: 5px solid #ff7d00;
	outline-offset: -4px;
}