JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MODUS</title>
</head>
<body>
<header>
<div class="header__wrap">
<div class="header__logo"><img src="img/icons/mainIcon.png"></div>
<ul class="header__nav">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li class="header__nav-item-portfolio"><a href="#">portfolio</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">features</a></li>
<li><a href="#">contacts</a></li>
<li><img src="img/icons/search.png"></li>
</ul>
</div>
</header>
</body>
</html>
CSS
header {
background-color: #2DC8C1; }
.header__wrap {
width: auto;
display: flex;
flex-direction: row;
justify-content: space-between; }
@media (max-width: 959px) {
.header__wrap {
width: 95%;
margin: 0 auto;
max-width: 960px; } }
@media (min-width: 960px) {
.header__wrap {
width: 90%;
margin: 0 auto;
max-width: 1170px; } }
.header__logo img {
margin: 20px 10px 0 0; }
.header__nav {
flex-basis: 70%;
padding-left: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
text-transform: uppercase;
list-style: none; }
.header__nav li {
list-style: none;
font-size: .9em;
cursor: pointer;
padding: 7px 15px;
border-bottom: 4px solid #2DC8C1;
transition: all .15s ease-in-out; }
.header__nav li a {
color: #fff;
text-decoration: none; }
.header__nav li:last-child {
padding-right: 0; }
.header__nav li:hover {
background-color: #E8645A;
border-radius: 5px;
border-bottom: 4px solid #E2534B; }
.header__nav li:last-child:hover {
background-color: inherit;
border-bottom: 4px solid #2DC8C1; }
.header__nav-item-portfolio {
position: relative; }
.header__nav-item-portfolio::before {
content: '>';
position: absolute;
left: 4pxeg);
color: #fff;
font-size: .9em;
margin: 0 4px 0 0; }