JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="image image1"></div>
  <div class="image image2"></div>
  <div class="image image3"></div>
  <div class="image image4"></div>
  <div class="image image5"></div>
  <div class="menu menu1">Menu</div>
  <div class="menu menu2">Menu</div>
  <div class="menu menu3">Menu</div>
  <div class="menu menu4">Menu</div>
  <div class="menu menu5">Menu</div>
</div>

CSS

.main {
  position:relative;
  overflow:hidden;
  height: 300px;
  border: 1px solid #000;
}
  .menu {
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    width:100%;
    height:20px;
    line-height:20px;
    border-top: 1px solid #000;
    background: #fff;
    box-sizing:border-box;
  }
    .menu1 {
      z-index:50;
      bottom:0px;
    }
    .menu2 {
      z-index:40;
      bottom:20px;
    }
    .menu3 {
      z-index:30;
      bottom:40px;
    }
    .menu4 {
      z-index:20;
      bottom:60px;
    }
    .menu5 {
      z-index:10;
      bottom:80px;
    }
  .image {
    position:absolute;
    top:0;
    left:0;
    width:40px;
    height:100%;
    background: pink;
  }
    .image1 {
      z-index:45;
      left:50px;
    }
    .image2 {
      z-index:35;
      left:100px;
    }
    .image3 {
      z-index:25;
      left:150px;
    }
    .image4 {
      z-index:15;
      left:200px;
    }
    .image5 {
      z-index:5;
      left:250px;
    }