JSFiddle - React, Tailwind, and code Playground

HTML

<div class="head">
	<div class="logo1">
		foo<span class="orange">bar</span>
	</div>

	<div class="nav">
		<a href="#">portfolio</a>
		<span style="color: #cccccc">|</span>
		<a href="#">about me</a>
		<span style="color: #cccccc">|</span>
		<a href="#">contact me</a>
	</div>
</div>

CSS

.logo1 {
		font-family: Helvetica;
		font-size: 36px;
		letter-spacing: -0.05em;
		text-align: left;
		display: inline-block;
		width: 525px;
	}

	.orange {
		color: #e68217;
		font-weight: bold; 
	}

	.nav {
		color: black;
		font-family: Helvetica;
		font-size: 18px;
		font-weight: bold; 
		letter-spacing: -0.05em;
		text-align: right;
		width: 300px;
		display: inline-block;
	}

	a:link {
		color: black;
		text-decoration: none;
	}

	a:visited {
		color: black;
		text-decoration: none;
	}

	a:hover {
		color: #e68217;
		text-decoration: none;
	}

	a:active {
		color: #e68217;
		text-decoration: none;
	}

	div.head {
		margin: auto;
		width: 850px;
		height: 100px;
		border-bottom: 3px solid #cccccc;
	}