JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>MODUS</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</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">
					<img src="img/icons/arrow.png">
					<a href="#">portfolio</a>
					<ul>
						<li>some page-1</li>
						<li>some page-2</li>
						<li>some page-3</li>
					</ul>
				</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;
  background-image: url(../img/Path.png);
  background-repeat: repeat-x;
  background-position: center bottom; }

.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;
  font-weight: bold;
  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:hover ul {
    top: 45px;
    opacity: 1; }
  .header__nav-item-portfolio ul {
    position: absolute;
    top: -500px;
    opacity: 0;
    left: -7px;
    margin: 0;
    width: 140%;
    padding: 8px 0;
    text-align: center;
    border: 7px solid #E2534B;
    border-radius: 5px;
    background-color: #E8645A;
    transition: all .5s ease;
    transition-delay: .1s; }
    .header__nav-item-portfolio ul li {
      color: #fff;
      padding: 5px;
      font-size: 1em;
      list-style: none;
      padding: 10px 0;
      text-transform: capitalize;
      border-top: 5px solid #E8645A;
     ...