JSFiddle - React, Tailwind, and code Playground

HTML

<div class="content-container">
		<a href="#" class="header-logo"><img src="https://i.imgur.com/bn2vAjo.png" alt="" title=""></a>
		<nav class="main-menu">
			<ul>
				<li><a href="">Journal</a></li>
				<li><a href="">About</a></li>
				<li><a href="">About</a></li>
				<li><a href="">Contact</a></li>
			</ul>
		</nav>
	</div>

CSS

.content-container {
    background: #292929;
	max-width: 680px;
	margin: 0 auto;
	
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.header-logo {
	line-height: 0;
	align-self: center;
}

nav.main-menu {
	align-self: center;
	/*height: 132px;*/
	/*display: flex;*/
	/*flex-direction: row;*/
	/*align-items: center;*/
	overflow: hidden;
}
nav.main-menu li {
	display:inline-block;
	overflow: hidden;
	box-sizing: border-box;
	width: 132px;
	height: 132px;
	font-weight:600;
	position: relative;
}

nav.main-menu li a {
	overflow: hidden;
	box-sizing: border-box;
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}