JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar" style="height: 979px;">
		<div id="center-sb" style="margin-top: 35.5px;">
			<header>
				<div class="logo"><a href="/" title="Лезгинка">Лезгинка</a></div>
				<div class="subtitle">Государственный академический заслуженный ансамбль танца Дагестана «Лезгинка»</div>
			</header>
			<nav class="menu">
				<ul id="menulist" class="menu-list">
					<li class="menu-item"><a id="menulink-1" href="#">Об ансамбле</a></li>
					<li class="menu-item"><a id="menulink-2" href="#">Состав ансамбля</a></li>
					<li class="menu-item"><a id="menulink-3" href="#">Школа-студия</a></li>
					<li class="menu-item"><a id="menulink-4" href="#">Новости</a></li>
					<li class="menu-item"><a id="menulink-5" href="#">Галерея</a></li>
					<li class="menu-item"><a id="menulink-6" href="#">Контакты</a></li>
				</ul>
			</nav>
			<div class="partners-title">Партнеры</div>
			<ul class="partners-list">
				<li class="partner"><a href="#"><img src="/img/partner-1.png" kasperskylab_antibanner="on"></a></li>
				<li class="partner"><a href="#"><img src="/img/partner-2.png" kasperskylab_antibanner="on"></a></li>
			</ul>
			<footer>
				<div class="contacts">
					<ul class="social-list">
						<li class="social-item"><a class="social-vk" href="#"></a></li>
						<li class="social-item"><a class="social-fb" href="#"></a></li>
						<li class="social-item"><a class="social-yt" href="#"></a></li>
						<li class="social-item"><a class="social-ig" href="#"></a></li>
						<li class="social-item"><a class="social-ok" href="#"></a></li>
						<li class="social-item"><a class="social-tw" href="#"></a></li>
					</ul>
					<p>Тел.: (8722) 67-57-74</p>
					<p>Тел./факс: (8722) 67-37-06</p>
					<p>E-mail: <a href="mailto:contact@lezginka.com">contact@lezginka.com</a></p>
				</div>
			</footer>
		</div>
	</div>

	<div id="submenu-container" style="height: 979px; left: 0px;">
		<ul class="submenu-list" id="submenu-1">
			<li><a href="#">История ансамбля</a></li>
			<li><a...

CSS

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
	color: #222;
}

html {
	font-size: 15px;
	line-height: 1.6;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: #b3d4fc;
	text-shadow: none;
}

::selection {
	background: #b3d4fc;
	text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
	margin: 0.2em 0;
	background: #ccc;
	color: #000;
	padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/******************************************
GENERAL
******************************************/
html {
	overflow: hidden;
}
body {
	font-family: 'Open...