JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">
    <div class="headerLeft">Left</div>
    <div class="headerCenter">Center</div>
    <div class="headerRight">Right</div>
  </div>
  <div class="core">
    <div class="coreItem">Core1</div>
    <div class="coreItem">Core2</div>
    <div class="coreItem">Core3</div>
    <div class="coreItem">Core4</div>
    <div class="coreItem">Core5</div>
    <div class="coreItem">Core6</div>
  </div>

CSS

body {
              display: flex;
              flex-direction: column;
        }

.header {
   /* opacity: 0.5; removed for demo */
   height: 50px; /* for demo purposes */
    margin-top: 50px; /* for demo purposes */
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: flex-end;

 }
 .headerLeft {
   z-index: inherit;
   background-color: red; /* adjusted for demo */
   text-align: right;
   align-self: stretch;
   flex: 2 1 250px;
 }
 .headerCenter {
   z-index: inherit;
   background-color: blue; /* adjusted for demo */
   text-align: right;
   align-self: stretch;
   flex: 1 1 175px;
 }
 .headerRight {
   z-index: inherit;
   background-color: green;
   text-align: right;
   align-self: stretch;
   flex: 1 1 100px;
 }
 .core {
     margin-top: -100px; /* for demo purposes */
     font-size: 2em; /* for demo purposes */
   z-index: 0;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;

 }
 .coreItem {
   align-self: stretch;
   flex: 1 1 400px;
 }