JSFiddle - React, Tailwind, and code Playground

by TiGR

HTML

<ul class="steps"><li><a href="#1">Шаг 1</a></li><li class="active"><a href="#2">Шаг 2</a></li><li><a href="#3">Шаг 3</a></li><li><a href="#4">Шаг 4</a></li><ul>

CSS

ul.steps {
    list-item-style:none;
}
ul.steps li {
}
ul.steps a, ul.steps li {
    margin:0;
    padding:0;
    display: inline-block;
}
ul.steps a {
    background: #ddd;
    background-image: linear-gradient(bottom, #E8E8E8 0%, #C0C0C0 50%, #E8E8E8 100%);
    background-image: -o-linear-gradient(bottom, #E8E8E8 0%, #C0C0C0 50%, #E8E8E8 100%);
    background-image: -moz-linear-gradient(bottom, #E8E8E8 0%, #C0C0C0 50%, #E8E8E8 100%);
    background-image: -webkit-linear-gradient(bottom, #E8E8E8 0%, #C0C0C0 50%, #E8E8E8 100%);
    background-image: -ms-linear-gradient(bottom, #E8E8E8 0%, #C0C0C0 50%, #E8E8E8 100%);
    padding: 0 2em;
    line-height: 30px;
    text-decoration: none;
    color: black;
    font-family: sans-serif;
}
ul.steps li.active a {
    background: #8c5;
    background-image: linear-gradient(bottom, #A7DF80 0%, #67C623 50%, #A7DF80 100%);
background-image: -o-linear-gradient(bottom, #A7DF80 0%, #67C623 50%, #A7DF80 100%);
background-image: -moz-linear-gradient(bottom, #A7DF80 0%, #67C623 50%, #A7DF80 100%);
background-image: -webkit-linear-gradient(bottom, #A7DF80 0%, #67C623 50%, #A7DF80 100%);
background-image: -ms-linear-gradient(bottom, #A7DF80 0%, #67C623 50%, #A7DF80 100%);
    color: white;
}
ul.steps li:before, ul.steps li:after {
    position:absolute;
    width: 0px;
    height: 0px;
    content:" ";
}
ul.steps li:before {
    border: 15px solid transparent;
    border-left: 5px solid white;
    border-right: 0px solid transparent;
}
ul.steps li:after  {
    border: 15px solid white;
    border-right: 0 solid white;
    border-left: 5px solid transparent;
    margin-left: -5px;
}
ul.steps li:first-of-type:before, ul.steps li:last-of-type:after {
    display: none;
}