JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="scenarioLayout">
  <li class="col1 row6">
    <span>item[0] - item[1]</span>
  </li>
  <li class="col2 row4">
    <span>item[0] - item[2]</span>
  </li>
  <li class="col2 row6">
    <span>item[0] - item[2.2]</span>
  </li>
  <li class="col2 row8">
    <span>item[0] - item[2.3]</span>
  </li>
  <li class="col3 row6">
    <span>item[0] - item[3]</span>
  </li>
  <li class="col4 row5">
    <span>item[0] - item[4]</span>
  </li>
  <li class="col4 row7">
    <span>item[0] - item[4.1]</span>
  </li>
  <li class="col5 row6">
    <span>item[0] - item[5]</span>
  </li>
</ul>

CSS

ul.scenarioLayout {    display: grid;
    grid-template-columns:repeat(6, 1fr);
    grid-template-rows:repeat(12, 1fr);}
ul.scenarioLayout li {
    float: left;
    height: 50px;
    text-align: center;
    position: relative;
    margin: 0 15px 10px 0; 
    overflow-wrap: break-word;
    width: 110px;
    padding-left: 18px;
    background-color: rgb(173, 238, 184);
}

ul.scenarioLayout li span {
    display: block;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); 
}

ul.scenarioLayout li::after {
    content: "";  
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    position: absolute; right: -15px; top: 0;
    border-left: 15px solid rgb(173, 238, 184);
}

ul.scenarioLayout li::before {
    content: "";  
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid #f3f5f6;
    position: absolute; left: 0; top: 0;
}
.col1 {grid-column:1;color:red}
.col2 {grid-column:2;color:blue}
.col3 {grid-column:3;color:green}
.col4 {grid-column:4;}
.col5 {grid-column:5;color:yellow}
.row1 {  grid-row:1 /span 2;}
.row4 {  grid-row:4 /span 2;}
.row5 {  grid-row:5 /span 2;}
.row6 {  grid-row:6 / span 2;}
.row7 {  grid-row:7 /span 2;}
.row8 {  grid-row:8/span 2;}
.row10 {  grid-row:8/span 2;}