JSFiddle - React, Tailwind, and code Playground

HTML

<header class="main-header main-header--blog">
    <div class="container container--header">
      <div class="main-header__block">
        <div class="main-header__holder">
          
          <div class="main-header__wrap">
            <div class="mobile-wrap">
              <div class="main-nav__toggle">
              </div>
            </div>
             <ul class="main-header__list">
              <li><a href="" class="main-header__link">Глвная</a></li>
              <li><a href="" class="main-header__link" >2 пункт</a></li>
              <li><a href="" class="main-header__link">3 пункт</a></li>
              <li><a href="" class="main-header__link main-header__link--active">Блог</a></li>
            </ul>
          </div>
          <a href="" class="main-header__logo">
            <img src="img/icons/logo-header.svg" alt="">
          </a>
        </div><!--end main-header__holder-->
      </div><!--end main-header__block-->
    </div>

    <div class="container">
      <p>dd</p>
    </div>
  </header>

CSS

.main-header {
	position: relative;
	background-color: #e74011;
}

.main-header--inner .main-header__link--active {
	border-bottom-color: #292929;
}

.main-header--blog .main-header__holder {
	justify-content: center;
}

.main-header--blog .main-header__list li:not(:last-child) .main-header__link {
	margin-right: 40px;
}

.main-header--blog .main-header__list li:nth-child(2) .main-header__link {
	margin-right: 245px;
}

.main-header__holder {
	position: relative;
	display: flex;
	align-items: center;
	padding-top: 40px;
}

.main-header__block {
	position: relative;
}

.main-header__list {
	display: flex;
	align-items: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.main-header__link {
	display: block;
	font-size: 15px;
	line-height: 1.2;
	color: #fff;
	border-bottom: 2px solid transparent;
  border: 1px solid yellow;
	padding-bottom: 8px;
	font-weight: bold;
}

.main-header__link--active {
	border-bottom: 2px solid #fff;
}

.main-header__logo {
	position: absolute;
	z-index: 5;
	left: 0px;
	right: 0px;
	display: block;
	margin: 0 auto;
	border: 5px solid blue;
	max-width: 165px;
}

.main-header__logo img {
	display: block;
}

.mobile-wrap {
	display: none;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
}