JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
	<!-- <link rel="stylesheet" href="css/media.css"> -->
</head>
<body>
	<div class="wrapper">
		<div class="content">
			
			<section class="header_wrap">
				<header class="header">
					<div class="header__content">

						<div class="header__content-row">

							<div class="content-row_left-main">
								<div class="row_left-main_name"><a href="#">Главная</a></div>
							</div>

							<div class="content-row_right-menu">

								<div class="right-menu_first">
									<div class="menu_first-name"><a href="#">Доставка</a></div>
										<div class="menu_first-name_img">
											<img src="../img/header/delivery_header.png" alt="" />
										</div>
								</div>
								<div class="right-menu_first">
									<div class="menu_first-name"><a href="#">Возврат</a></div>
										<div class="menu_first-name_img">
											<img src="../img/header/header_money_back.png" alt="" />
										</div>
								</div>
								<div class="right-menu_first">
									<div class="menu_first-name">
												<nav class="menuu">
													<ul class="menu_list">
														<li>
															<a href="" class="menu_link">Помощь</a>
																<ul class="sub-menu_list">
																	<li>
																		<a href="" class="sub-menu_link">Второй уровень</a>
																	</li>
																	<li>
																		<a href="" class="sub-menu_link">Второй уровень</a>
																	<li>
																		<a href="" class="sub-menu_link">Второй уровень</a>
																	</li>
																	<li>
																		<a href="" class="sub-menu_link">Второй уровень</a>
																	</li>
																</ul>
														</li>
													</ul>
												</nav>
									</div>
										<div class="menu_first-name_img">
											<img...

CSS

/*Обнуление*/
@import 'null.scss';
/*Шрифты*/
@import url('https://fonts.googleapis.com/css?family=Darker+Grotesque:400,500,700,800,900&display=swap');
@font-face {
	scr: url(../fonts/MasterCardDi.ttf);
	font-family: "MasterCardDi";
	font-weight: 400;
}

.wrapper{
	overflow: hidden;
}
/*Header*/
.header__content {
	background-color: #0b8dd6;
	/*padding: 15px 0;*/
}
.header__content-row {
	display: flex;
	padding: 0 15px;
	justify-content: space-between;
	align-items: center;
}
.header__content-row a{
	color: #ffffff;
	font-family: "Darker Grotesque";
	font-size: 20px;
	font-weight: 700;
}
.row_left-main_name {}
.content-row_left-main {}
.content-row_right-menu {
	display: flex;
	padding-left: 100px;
}
.right-menu_first {
	display: flex;
	padding-left: 30px;
	align-items: center;
}
.right-menu_first:after{
	content: '';
	background-color: white;
	width: 1px;
	height: 54px;

}
.menu_first-name {
	padding-right: 10px;
}
.menu_first-name_img {
	padding-right: 30px;
}
/*Выпадающее меню*/
.menuu li{
	position: relative;

}

.sub-menu_list {
	/*display: none;*/
	opacity: 0;
	visibility: hidden;
	min-width: 150px;
	position: absolute;
	top: 13px;
	left: -30px;
	min-width: 165px;
	padding-top: 15px;
	padding-bottom: 10px;
	margin-top: 5px;
	background-color: #0b8dd6;

	transition: all 0.8s ease 0s;

}

.right-menu_first:hover .sub-menu_list{
	opacity: 1;
	visibility: visible;
}
.sub-menu_list>li{
	padding: 10px 0;
}


.right-menu_second-lang {
	display: flex;
	padding-left: 30px;
	align-items: center;
}
.right-menu_second-lang:after{
	content: '';
	background-color: white;
	width: 1px;
	height: 54px;
}
.right-menu_third-basket {
	display: flex;
	padding-left: 30px;
	align-items: center;
}
.menu_third-basket_name {}