JSFiddle - React, Tailwind, and code Playground

HTML

<section class="home">
	<div class="container">
		<div class="home__wrap">
			<h3 class="home__title">text 1</h3>
			<div class="home__desc">
				<p>lorem lorem</p>
			</div>
		</div>
	</div>
</section>

CSS

.home {
  position: relative;
  background-color: #fff;
  margin-bottom: 85px;
}

.home {
  position: relative;
  padding-top: 65px;
  padding-bottom: 60px;
}

.home:after {
  position: absolute;
  content: ' ';
  top: 0px;
  left: 0px;
  width: calc(50vw + 10%);
  height: 100%;
  transform-origin: 0 0;
  transform: skewX(-30deg);
  background-color: #ff8f1c;
}

.home__title {
  font-size: 71px;
  line-height: 1.3;
  color: #000;
  font-weight: 500;
}

.container {
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
}

* {
  box-sizing: border-box;
}

*:after,
*:before {
  box-sizing: border-box;
}

.home__wrap >* {
  position: relative;
  z-index: 3;
}