JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
					<div class="diagonal"></div>
				</div>

CSS

* {
  box-sizing: border-box;
}

body {
  background-color:red;
}

.container {
  width:1170px;
  margin:0 auto;
  margin-top:200px;
	height:700px;
	position:relative;
	z-index:3;
	background-color:white;
	border-style:solid;
	border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
	border-width:0 1px 1px 1px;
}

.diagonal {
	width:100%;
	height:400px;
	transform:skewY(-10deg);
	position:absolute;
	top:-200px;
	left:0;
	background-color:white;
	border-style:solid;
	border-color:transparent #D2D8DE;
	border-width:0 1px;
	z-index:-1;
}