JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
	<nav class="main-menu">
  
		<ul class="menu-left">
			<li class="menu-item">Портфолио</li>
			<li class="menu-item">Обо мне</li>
		</ul>
    
		<div class="logo"></div>
    
		<ul class="menu-right">
			<li class="menu-item">Блог</li>
			<li class="menu-item">Связаться</li>
		</ul>
    
	</nav>
</header>

SCSS

html {
  font-size: 14px; }

body {
  margin: 0;
  padding: 0; }

ul {
  list-style-type: none;
  padding: 0;
  margin: 0; }

.main-menu {
  background-color: #323232;
  color: #fff;
  text-transform: uppercase;
  font-size: 1rem;
  position: relative;
  height: 60px;}
  .main-menu:after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 50%;
    margin-left: -45px;
    border-style: solid;
    border-color: #323232 transparent transparent;
    border-width: 25px 45px; }
  .main-menu .menu-item {
    display: inline-block;
    margin-right: 30px; }
    .main-menu .menu-item:last-child {
      margin-right: 0; }
    .main-menu .menu-item:hover {
      cursor: pointer;
      color: #2eb398; }

.menu-left,
.menu-right {
  position: absolute;
  top: 50%; }

.menu-left {
  right: 50%;
  margin-right: 70px; }

.menu-right {
  left: 50%;
  margin-left: 70px; }

.logo {
  position: absolute;
  top: 5px;
  z-index: 1;
  // background-image: url("../img/logo.png"); // здесь будет логотип
  background-color: #2eb398;
  height: 55px;
  width: 64px;
  margin-left: 50%;
  transform: translateX(-50%); }