JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div class="wrap">
        <ol class="group">
            <li class="processed">Step1</li>
            <li>Step2</li>
            <li>Step3</li>
        </ol>
    </div>
</body>

CSS

body {
    margin: 25px;
}
.group {
    content: "";
    display: table;
    clear: both;
}
ol {
    border: 1px solid #ccc;
    display: table;
    table-layout: fixed;
}
li {
    display: table-cell;
    background-color: #fff;
    padding: 10px;
}
.processed {
    background-color: #f2f2f2;
    position: relative;
}
.processed:before {
    content: '';
    background-color: #fff;
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 38px;
}
.processed:after {
    content: '';
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 15px solid #f2f2f2;
    position: absolute;
    right: -5px;
    top: 0;
}