JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wizard">
                    <a class="inicio"><span></span>test1</a>
                    <a class="badge"><span>
                        blah blah
                        
                    </span></a>
                    <a class="fim"><span></span>test2</a>
                </div>

CSS

.wizard .badge {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #efefef;
    position: relative;
    display: inline-block;
}

.wizard .badge:before {
    width: 0;
    height: 0;
    border-top: 20 solid #FFF;
    border-bottom: 20 inset #FFFFFF;
    border-right: 20 solid #efefef;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.wizard .badge:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}

.wizard .fim {
    padding: 10px 0px 5px 0px;
    margin-right: 5px;
    background: #007ACC;
    position: relative;
    display: inline-block;
    width: 100px;
    height: 25px;
    color: white;
    font-family: sans-serif;
}
.wizard .fim:before {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid white;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}

.wizard .fim:after {
    width: 0;
    height: 0;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #007ACC;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}

.wizard .inicio {
    padding: 10px 12px 10px;
    margin-right: 5px;
    background: #007ACC;
    position: relative;
    display: inline-block;
    width: 75px;
    height: 20px;
    color: white;
    font-family: sans-serif;
}

.wizard .inicio:before {
    width: 0;
    height: 0;
    border-top: 20px solid #FFF;
    border-bottom: 20px inset #FFFFFF;
    border-right: 20px solid #007ACC;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.wizard .inicio:after {
   width: 0;
    height: 0;
    border-top: 20px solid #007ACC;
    border-bottom: 20px inset #007ACC;
    border-right: 20px solid transparent;
  ...