JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="widget">Test</div>
</div>

CSS

.wrapper {
    background:red;
    padding:20px 0;
}
.widget {
    width:600px;
    height:400px;
    margin:0 auto;
    text-align:center;
    background:white;
    box-shadow:20em 0 0 0 white, -20em 0 0 0 white;
    position:relative;
    z-index:2;
}
.widget:before, .widget:after {
    position:absolute;
	content: " ";
	width:1em;
	left:-1em;
	top:0;
	height:100%;
	background:white;
	z-index:1;    
}
 .widget:after {
     left:auto;
    right:-1em;
 }