JSFiddle - React, Tailwind, and code Playground

HTML

Flex:
<div class="bars before"></div>
<div class="flex container">
  <div class="item z1"></div>
  <div class="item z1"></div>
  <div class="item z0"></div>
  <div class="item z0"></div>
  <div class="item za"></div>
  <div class="item za"></div>
  <div class="item z-1"></div>
  <div class="item z-1"></div>
</div>
<div class="bars after"></div>
<hr />
Flow:
<div class="bars before"></div>
<div class="flow container">
  <div class="item z1"></div>
  <div class="item z1"></div>
  <div class="item z0"></div>
  <div class="item z0"></div>
  <div class="item za"></div>
  <div class="item za"></div>
  <div class="item z-1"></div>
  <div class="item z-1"></div>
</div>
<div class="bars after"></div>

CSS

.container {
  justify-content: center;
  text-align: center;
  counter-reset: item;
}
.flex.container {
  display: flex;
}
.item {
  display: inline-block;
  vertical-align: top;
  padding: 20px;
  background: #ffa;
  align-self: flex-start;
  margin-left: -20px;
}
.item::before {
  content: '(' counter(item) ') ';
  counter-increment: item;
}
.item:nth-child(even) {
  background: #aff;
  margin-top: 40px;
}
.flow .item:not(.za) { position: relative }
.za::after{ content: 'z: auto'; }
.z0 { z-index: 0; } .z0::after{ content: 'z: 0'; }
.z1 { z-index: 1; } .z1::after{ content: 'z: 1'; }
.z-1 { z-index: -1; } .z-1::after{ content: 'z: -1'; }
.bars::before, .bars::after {
  content: '';
  display: block;
  background: blue;
  height: 3px;
  margin-top: 20px;
  margin-bottom: -20px;
}
.bars::after {
  background: red;
  position: relative;
}
.after::before, .after::after {
  margin-top: -20px;
  margin-bottom: 20px;
}