JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wizard">
  <a class="item">
  </a>
</div>

CSS

.item {
    display: inline-block;
    padding: 15px;
    padding-left: 25px;
  
    /*default styles*/
    background-color: green;
    position: relative;
  }  
  
  
 .item:before,
.item:after {
      content: "";
      height: 0;
      width: 0;
      border-width: 15px 0 15px  10px;
      border-style: solid;
      
      position: absolute;
      left: 100%;
      top: 0;
    }
    
    
.item:before {
          border-color: transparent transparent transparent white;
        left: 0;  
      }
      
      
.item:after {
        border-color: transparent transparent transparent green;  
      }