JSFiddle - React, Tailwind, and code Playground

HTML

<div class="start-wrapper">
			<div class="start_work">
				Н<span>ачало работ</span>ы
			</div>
			<div class="start">
				<div class="video">
					<div class="youtube">
					</div>
					<div class="text">
					Знакомство с личным кабинетом
					</div>
					
				</div>
				<div class="video_separator">
				</div>
				
				<div class="text_left">
					<ul>
						<li><a href="#">Описание рубрикатора</a></li>
						<li><a href="#">Описание статусов</a></li>
						<li><a href="#">Соглашения</a></li>
						<li><a href="#">Правила</a></li>
					</ul>
				</div>
				
				<div class="text_right">
					<ul>
						<li><a href="#">Описание рубрикатора</a></li>
						<li><a href="#">Описание статусов</a></li>
						<li><a href="#">Соглашения</a></li>
						<li><a href="#">Правила</a></li>
					</ul>
				</div>
				
			</div>
		</div>

CSS

.start-wrapper{
	width:100%;
	height:335px;
	position:relative;
	z-index:1;
	margin:0 auto;
	border:0px solid #74848e;
	background-color: rgba(0,0,0,.22);/*Надо сменить на нормальный прозрачный фон*/
}
.start_work{
	position:relative;
	opacity:1;
	width:145px;
	height:65px;
	margin:0 auto;
	padding:25px 0px 0px 0px;
	color:#fff;
	text-transform:uppercase;
}

.start_work span{
	text-decoration:underline;
}
.start {
    border: 1px solid #74848e;
    position: relative;
    z-index: 3;
    border-radius: 15px;
    width: 940px;
    margin: 0 auto;
    height: 212px;
}