JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page">
    <div id="panel">
        <div id="child" class="child">child1</div>
        <div class="child">child2</div>
        <div class="child">child3</div>
    </div>
</div>

CSS

#page {
    width: 100%;
    background: #fee;
    border: 1px solid red;
    overflow-x: hidden;
}
#page:before {
    position: absolute;
    top: 5px; left: 15px;
    content: 'page wrapper';
    color: red;
}

#panel {
    width: 300px;
    position: relative;
    left: 50%;
    margin-left: -150px;
    background: #eef;
    border: 2px solid blue;
}
#panel:after {
    position: absolute;
    top: 2px; left: 305px;
    content: 'grid panel';
    white-space: nowrap;
    color: blue;
}

.child { 
    position: relative;
    padding: 10px;
    height: 120px;
    border: 1px solid grey;
    color: grey;
}
#child:before {
    content: 'background';
    text-align: center;
    color: green;
    position: absolute;
    top: 30px;
    bottom: 30px;
    width: 1000px;
    left: -400px;
    background: rgba(0,255,0,0.5);
}