JSFiddle - React, Tailwind, and code Playground

by seg veremey

HTML

<div class="header__menu">

		<ul class="l-container">
			<li class="header__menu-item"><a href="#">AV кабели</a>
				<div class="header__menu-down">
					<ul class="sub__menu">
						<li class="sub__menu-link"><h4>Акустические кабели</h4></li>
						<li class="sub__menu-link"><a href="#">HDMI и DVI кабели</a></li>
						<li class="sub__menu-link"><a href="#">Аналоговые небалансные кабели</a></li>
						<li class="sub__menu-link"><a href="#">Аналоговые балансные кабели</a></li>
						<li class="sub__menu-link"><a href="#">Цифровые оптические кабели</a></li>
						<li class="sub__menu-link"><a href="#">Цифровые балансные кабели</a></li>
						<li class="sub__menu-link"><a href="#">Цифровые коаксиальные кабели</a></li>
						<li class="sub__menu-link"><a href="#">Сабвуферные кабели</a></li>
						<li class="sub__menu-link"><a href="#">Силовые кабели</a></li>
						<li class="sub__menu-link"><a href="#">Коннекторы, разъемы</a></li>
					</ul>
				</div>
			</li>
			<li class="header__menu-item"><a href="#">HDMI кабель</a></li>
			<li class="header__menu-item"><a href="#">Аудио кабель</a></li>
			<li class="header__menu-item"><a href="#"> Коннекторы, разъемы</a></li>
			<li class="header__menu-item"><a href="#">VGA кабели</a></li>
			<li class="header__menu-item"><a href="#">Микрофонные кабели</a></li>
			<li class="header__menu-item"><a href="#">Кабель для тонармов</a></li>
		</ul>
	</div>
<div class="slider">
	<div class="l-container"> <!-- ??? висота=0 ??? -->

			<div class="slider__wrap">  <!-- ??? висота=0 ??? -->
				<div class="slider__spin">
					<div class="slider__commodity">
						<a href="#">BEKKER представляет:</a>
						<h1 class="slider__heading">
						<strong>Домашние кинотеатры</strong>
						</h1>
					</div>
						<p>Умопомрачительная серия<br>легендарных брендов</p>
					<img class="slider__spin-img"src="img/icons/tv_slider.png" alt="">
				</div>
			</div>

		</div>
	<img class="slider__bg" src="img/icons/bg_slider.png" alt="">
</div>

CSS

.header__menu { background: #292929; bottom: 0; height: 55px; right: 0; left: 0; font-weight: bold; }
.l-container { margin: 0 auto; position: relative; width: 990px; *zoom: 1; }
.l-container:after { content: " "; display: table; clear: both; }
.header__menu ul { font-size: 0; margin: 0 auto; }

.header__menu-item { float: left; position: relative; }
.header__menu-item:before, .header__menu-item:after { content: ""; height: 34px; position: absolute; top: 9px; width: 1px; background: #313131; left: -1px; }
.header__menu-item:after { background: #232323; left: -2px; }
.header__menu-item:hover { background: #f8eb01; color: #171717; z-index: 500; }
.header__menu-item:hover:after, .header__menu-item:hover:before { display: none; }
.header__menu-item:hover .header__menu-down { display: block; }
.header__menu-item:first-child:after, .header__menu-item:first-child:before { content: ""; display: none; }
.header__menu-item a { color: white; position: relative; display: block; font-size: 13px; line-height: 55px; padding: 0px 17px; margin: 0 -1px; text-decoration: none; }
.header__menu-item a:hover { color: #464646; }

.header__menu-down { display: none; position: absolute; background-color: blue; border: 3px solid #f8eb01; top: 55px; left: 0; z-index: 999; }
.header__menu-down ul { z-index: 999; }
.header__menu-down li { z-index: 999; }
.header__menu-down a { color: black; z-index: 999; }
.slider { max-height: 360px; background: #f8eb01; }

.slider__wrap { height: 360px; cursor: pointer; height: 100%; }

.slider__spin { position: absolute; height: 100%; top: 0; left: 0; z-index: 4; }
.slider__spin:before { content: ""; position: absolute; top: 180px; left: -35px; background: url('../img/icons-s46d5aaa24e.png') 0 -1758px no-repeat; width: 32px; height: 64px; }
.slider__spin:after { content: ""; position: absolute; top: 180px; left: 990px; background: url('../img/icons-s46d5aaa24e.png') 0 -1832px no-repeat; width: 32px; height: 64px; }
.slider__spin p { font: 18px bold,...