JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
			<div class="main">
<img src="img/icon/menu.png" class="iconmenu">
				<nav id="cbp-hrmenu" class="cbp-hrmenu">
					<ul id="ulmenu"><div class="wrapplogo"><a href="index.php" class="logolink"><img class="logo" src="img/logo.png"></a></div>
				
						<li>
							<a href="#">1</a>
							<div class="cbp-hrsub">
								<div class="cbp-hrsub-inner">
									<div>
										<h4></h4>
										<ul>
											<li><a href="#remont_lubouy_slojnosti" class="uslitemlink">2</a></li>
											<li><a href="#remont_electriki" class="uslitemlink">3</a></li>
											<li><a href="#computernya_diagnostika" class="uslitemlink">4</a></li>
											<li><a href="#ustanovka_signalizaciy" class="uslitemlink">5</a></li>
										</ul>
										
									</div>
									<div>
										<h4></h4>
										<ul>
											<li><a href="#malarnya_kuzovnye_rabotu" class="uslitemlink">6</a></li>
											<li><a href="#razval_sxojdenya" class="uslitemlink">Развал схождения</a></li>
											<li><a href="#vukyp_auto" class="uslitemlink">Выкуп автомобилей</a></li>
											<li><a href="#svarka_argonom" class="uslitemlink">Сварка аргоном</a></li>
										</ul>
										
									</div>
									<div>
										<h4></h4>
										<ul>
											<li><a href="#evakuacia_auto" class="uslitemlink">Эвакуация автомобиля</a></li>
											<li><a href="#regulirovka_sveta_far" class="uslitemlink">Регулировка света фар</a></li>
											<li><a href="#shinomontaj" class="uslitemlink">Услуги шиномонтажа</a></li>
											<li><a href="#xranenue_koles" class="uslitemlink">Хранение колес</a></li>
										</ul>
									</div>
									
								</div><!-- /cbp-hrsub-inner -->
							</div><!-- /cbp-hrsub -->
						</li>
						
						 <li><a class="linkzapchasti" href="catalog.php">Автомагазин</a></li>
						  <li><a class="linkbydetails" href="by_details.php">Б/У запчасти</a></li>
						 <li><a class="" href="">3</a></li>
						 <li><a class="linkourworks"...

CSS

/*-------menu------------*/
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,vietnamese,cyrillic-ext,latin-ext,cyrillic);
@font-face {
    font-family: PFDinDisplayPro-Light; /* Имя шрифта */
    src: url(fonts/pfdindisplaypro-light.ttf); /* Путь к файлу со шрифтом */
   }
  
a{text-decoration:none;}
.cbp-hrmenu {
	width: 100%;
	background-color:#183d61;
	//font-family: 'Lato', Calibri, Arial, sans-serif;
	font-family:PFDinDisplayPro-Light;
	position:relative;
}

/* general ul style */
.cbp-hrmenu ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: 'Roboto', sans-serif;
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
	width: 100%;
	/*text-align:center;*/
	text-align:right;
	/*max-width: 88em;*/
	max-width: 1350px;
	margin: 0 auto;
	/*padding: 0 1.875em;*/
}
.cbp-hrmenu > ul > li {
	display: inline-block;
}
.cbp-hrmenu > ul > li > a {
	font-weight: 700;
	/*padding: 1em 2em;*/
	padding: 1em 0.5em;
	color: #ffffff;
	display: inline-block;
	//font-family: 'Lato', Calibri, Arial, sans-serif;
	font-family:PFDinDisplayPro-Light;
}
/*.cbp-hrmenu > ul > li > a:hover {
	border-bottom: 2px solid #ffb732;
}*/
.cbp-hrmenu > ul > li > a::before,
.cbp-hrmenu > ul > li > a::after {
	display: inline-block;
	opacity: 0;
	-webkit-opacity: 0;
    -ms-opacity: 0;
    -moz-opacity: 0;
    -o-opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	-o-transition: -o-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}
.cbp-hrmenu > ul > li > a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	-o-transform: translateX(20px);
	transform: translateX(20px);
}
.cbp-hrmenu > ul > li > a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform:...