JSFiddle - React, Tailwind, and code Playground

HTML

<section class="request">
  <div class="request__bg">
    <div class="container">
      <div class="request__wrap">
        <div class="request__content">
          <h3>ffdfgfd</h3>
        </div>
      
        <div class="request__block">
          <div class="request__inner">
            <div class="request__box">
              <span>Мы с вами свяжемся</span>
              <p>прямо сейчас</p>
            </div>
          </div>
        </div>
      </div>
    </div><!--end container-->
  </div>
</section>

SCSS

.request {
  margin-top: 110px;
	margin-bottom: 80px;
}

.request__bg {
	position: relative;
  border: 5px solid green;
}

.request__bg:after,
.request__bg:before {
	position: absolute;
	content: ' ';
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-webkit-clip-path: polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
	clip-path: polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
}

.request__bg:after {
	z-index: 2;
	background-image: url(../img//request.jpg);
	background-position: top center;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
}

.request__bg:before {
	z-index: 3;
	background-color: rgba(0, 0, 0, 0.7);
}

.request__image {
	max-width: 115px;
	margin: 0 auto;
	margin-bottom: 55px;
}

.request__image img {
	display: block;
}

.request__title {
	font-size: 36px;
	line-height: 1.3;
	color: #ffffff;
	text-transform: uppercase;
	font-weight: normal;
}

.request__title span {
	font-weight: 900;
}

.request__text p {
	font-size: 18px;
	line-height: 1.3;
	color: #ffffff;
}

.request__wrap {
	position: relative;
	z-index: 4;
}

.request__content {
	max-width: 500px;
	padding-top: 120px;
	padding-bottom: 150px;
}

.request__block {
	position: absolute;
	content: ' ';
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 0px;
	max-width: 450px;
	width: 100%;
	height: -webkit-calc(100%);
	height: calc(100%);
	background-image: url(https://klike.net/uploads/posts/2019-01/1547365376_1.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	padding: 15px;
  border: 5px solid red;
}

.request__inner {
	background-color: red;
}

.request__box {
	position: relative;
	border: 2px solid #323232;
	margin-bottom: 25px;
	margin-top: 25px;
	width: 100%;
}

.request__box span {
	position: absolute;
	display: block;
	top: -9px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform:...