JSFiddle - React, Tailwind, and code Playground

Left and right triangle cutouts on a block level element

HTML

<div class="box">
    <div class="pseudo-box"></div>
    
    The text or whatever you want inside this box goes here!
    
</div>

CSS

body {
  background-color: lightblue;
}

.box {
  position: relative;
  height: 500px; /*height must be set. you could avoid this using a few extra html elements. In your case it already has a set height, so lets leave it as it is */
  padding: 10px; /*optional. give whatever padding you want*/
  background-color: green;
  background-clip: padding-box;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

.box:after,
.box:before,
.pseudo-box:after,
.pseudo-box:before {
  box-sizing: border-box;
  content: "";
  position: absolute;
}

.box:after,
.box:before {
  right: 100%;
  border-right: 25px solid green; /*color must match .box's background-color*/
}

.pseudo-box:after,
.pseudo-box:before {
  left: 100%;
  border-left: 25px solid green; /*color must match .box's background-color*/
}

.box:before,
.pseudo-box:before {
  top: 0;
  height: 60%; /*this height PLUS the height applied on the after pseudo elements below must total 100%. change them yo your prefenrence*/
  border-bottom: 20px solid transparent;
}

.box:after,
.pseudo-box:after {
  bottom: 0;
  height: 40%;
  border-top: 20px solid transparent;
}