JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="header">
    <div class="nav">
      nav
    </div>
  </div>
</div>

CSS

.wrapper{
  position:relative;
  background:#fff;
  z-index:0;
}
.wrapper:before{
  content:'';
  position:absolute;
  top:10px;
  left:50%;
  right:0;
  bottom:10px;
  background:#bbb;
  z-index:-1;
}
.header{
  width:500px;
  margin:0 auto;
  padding:10px 0;
  background:#fff;
}
.header:after
{
  content:'';
  display:block;
  clear:both;
}
.nav{
  position:relative;
  width:300px;
  float:right;
  z-index:0;
}
.nav:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#bbb;
  z-index:-1;
}