JSFiddle - React, Tailwind, and code Playground

HTML

<header class="site-header">
  <div class="container">
    <div class="d33">
    </div>
  </div>

  <nav class="site-nav">
    <div class="container">
      <ul>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Staff</a></li>
        <li><a href="">Articles</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>
<section class="stn-servises">
  <h2 class="container">
    <div class="row">
      <div class="col-md-6 col-lg-3">fdfdf</div>
      <div class="col-md-6 col-lg-3"></div>
      <div class="col-md-6 col-lg-3"></div>
      <div class="col-md-6 col-lg-3"></div>
    </div>
  </h2>
</section>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  background: #ebebeb;
}

header {
  height: 135px;
}

.site-header {
  background: #373737;
}

.site-nav {
  height: 65px;
  background: #474747;
}

.d33 {
  width: 80px;
  height: 65px;
  background: #f26c4f;
  position: relative;
}

.d33:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 100%;
  top: calc(50% - 12px);
  border-top: 12px solid transparent;
  border-left: 14px solid #f26c4f;
  border-bottom: 12px solid transparent;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
}

ul li {
  list-style: none;
  position: relative;
  padding: 0 25px 0 20px;
}

li:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 10px;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  background: #767676;
}

li:last-child:after {
  display: none;
}

ul li a {
  display: block;
  font-size: 12px;
  font-family: arial;
  text-decoration: none;
  font-weight: 400;
  color: #fff;
  box-sizing: border-box;
  line-height: 65px;
  height: 65px;
}

a:hover {
  border-bottom: 3px solid #f26c4f;
  box-sizing: border-box;
  text-decoration: none;
  color: #fff;
}