JSFiddle - React, Tailwind, and code Playground

HTML

<div class="b-page__line">
    	<div class="content__page">
    		<div class="content__page__sidebar">
    			<ul class="content__page_sidebar-nav">
					<li class="nav__item_first">
						<a class="first__afisha">Новости</a>
						<a>Главное</a>
						<a>Громкие дела</a>
						<a>Убийства</a>
					</li>
					<li class="nav__item_second">
						<a class="first__afisha">Расследования</a>
						<a>Главное</a>
						<a>Громкие дела</a>
						<a>Убийства</a>
					</li>
					<li class="nav__item_three">
						<a class="first__afisha">Грязь</a>
						<a>Главное</a>
						<a>Громкие дела</a>
						<a>Убийства</a>
					</li>
					<li class="nav__item_four">
						<a class="first__afisha">Лучшая грязь</a>
						<a>Главное</a>
						<a>Громкие дела</a>
						<a>Убийства</a>
					</li>
					<li class="nav__item_five">
						<a class="first__afisha">Такая себе грязь</a>
						<a>Главное</a>
						<a>Громкие дела</a>
						<a>Убийства</a>
					</li>
					<li class="nav__item_six">
						<a class="first__afisha">Хорошая грязь</a>
						<a>Главное</a>
						<a>Громкие дела</a>
						<a>Убийства</a>
					</li>
				</ul>
    		</div>
    		<div class="content__page__document">
    			<div class="content__page__document__head">
    				<p class="content__page__document__head__text">Our Offices</p>
    			</div>
    			<div class="content__page__document__footer"></div>
    		</div>
    	</div>
    </div>
    <div class="b-page__line">
    	<div class="b-page__content__mid">
    		<div class="b-page__content__mid__fist-square">
    			<p class="fist-square__text">“Quisque in enim velit, at dignissim est. Nulla ul corper, dolor ac pellentesque placerat, justo tellus gravida erat, vel</p>
    			<p class="fist-square__text-second">John Doe, Lorem Ipsum</p>
    		</div>
    	</div>
    </div>

CSS

.content__page__sidebar {
	width: 250px;
	margin-top: -45px;
	margin-left: -30px;
}

.content__page_sidebar-nav {
	background-color: #f3f3f3;
}

.first__afisha {
	text-transform: uppercase;
}

.content__page_sidebar-nav {
	list-style: none;
	padding: 0 ;
	margin: 30px
}

.content__page_sidebar-nav li {
	height: 50px;
	width: 250px;
	overflow: hidden;
	border: 1px solid #e2e2e2;
	background: #f3f3f3;
}

.content__page_sidebar-nav li:hover {
	width: 250px;
	height: 180px;
	transition: .6s;
	opacity: .7;
}

.content__page_sidebar-nav li a {
	display: block;
	width: 250px;
	height: 40px;
	line-height: 30px;
	margin: 1px;
	color: #8f8f8f;
	padding-left: 25px;
	cursor: pointer;
}

.content__page_sidebar-nav li a:hover {
	color: #29C5E6;
   /* background-color: #29c5e6;*/
    transition: .3s;
    transition-delay: 0.2s;
}

.content__page_sidebar-nav li a:first-child {
	height: 50px;
	line-height: 50px;
	position: relative;
}

.content__page_sidebar-nav li a:first-child:before {
	content: '';
	display: block;
	position: absolute;
	height: 7px;
	width: 7px;
	top: 21px;
	left: 7px;
}

.content__page_sidebar-nav a:first-child:before {
	background: #8f8f8f;
	position: relative;
}

.content__page_sidebar-nav a:before {
	content: '';
	display: block;
	position: absolute;
	height: 5px;
	width: 5px;
	top: 18px;
	left: -15px;
}

.content__page_sidebar-nav a:before {
		background: #0085FA;
		position: relative;
}

.content__page_sidebar-nav li:hover .first__afisha:before  {
  background: #29C5E6;
  transition: .3s;
  transition-delay: 0.2s;
}
/*next*/

.content__page__document {
	width: 250px;
	border: 1px solid #E7E7E7;
}

.content__page__document__head {
	background: #29C5E6;
	color: #FFFFFF;
	padding: 1px;
}

.content__page__document__head__text {
	margin-left: 10px;
}

.content__page__document__footer {
	height: 200px;
	border: 10px solid #F3F3F3;
	background-color: #E2E2E2;
}
/*next*/

.b-page__content__mid {
	width: 680px;
	float: right;
	position: relative;
	top:...