JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <label><input type="radio" value="1" name="horse" /><span>Шаг 1</span></label>
    <label><input type="radio" value="1" name="horse" /><span>Шаг 2</span></label>
    <label><input type="radio" value="1" name="horse" /><span>Шаг 3</span></label>
    <label><input type="radio" value="1" name="horse" /><span>Шаг 4</span></label>
</section>

CSS

body {font: 14px/16px Helvetica;}
input[type="radio"] {display: none;}
section {width: 350px;margin: 20px auto;height: 26px;}
input[type="radio"]:checked + span {color: #fff;}
label:first-child input[type=radio] + span {width: 90px;left: -10px;}
label:last-child input[type=radio] + span {width: 90px;left: 0;}

label {
    width: 80px;
    height: 26px;
    display: block;
    position: relative;       
    text-align: center;
    overflow: hidden;
    float: left;
    padding: 0 3px;
}


input[type="radio"] + span {
    padding-top: 5px;
    display: block;
    height: 100%;
	width: 100%;
    position: relative;
}

input[type="radio"] + span:before, 
input[type="radio"] + span:after {
    content: '';
    position: absolute;
    height: 13px;
    width: 100%;
    z-index: -1;
    left: 0px;    
}

input[type="radio"] + span:before {
    transform: skewX(25deg);
    -webkit-transform: skewX(25deg);
    -o-transform: skewX(25deg);
    -ms-transform: skewX(25deg);
    -moz-transform: skewX(25deg);
    background: linear-gradient(to bottom, #D8D8D8, #A4A4A4);
    background: -webkit-linear-gradient(to bottom, #D8D8D8, #A4A4A4);
    background: -o-linear-gradient(to bottom, #D8D8D8, #A4A4A4);
    background: -ms-linear-gradient(to bottom, #D8D8D8, #A4A4A4);
    background: -moz-linear-gradient(to bottom, #D8D8D8, #A4A4A4);
    top: 0;
}

input[type="radio"] + span:after {
    transform: skewX(-25deg);
    -webkit-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    background: linear-gradient(to bottom, #A4A4A4, #D8D8D8);
    background: -webkit-linear-gradient(to bottom, #A4A4A4, #D8D8D8);
    background: -o-linear-gradient(to bottom, #A4A4A4, #D8D8D8);
    background: -ms-linear-gradient(to bottom, #A4A4A4, #D8D8D8);
    background: -moz-linear-gradient(to bottom, #A4A4A4, #D8D8D8);
    bottom: 5px;
}

input[type="radio"]:checked + span:after {
    transform: skewX(-25deg);
   ...