JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="scenarioLayout">
  <li>
    <span>item[0] - item[2]</span>
  </li>
  <li>
    <span>item[0] - item[2]</span>
  </li>
  <li>
    <span>item[0] - item[2]</span>
  </li>
</ul>

CSS

ul.scenarioLayout li {
    display: block;
    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;
}